Webpack4(四) loader的执行顺序和局部引入css

loader 执行顺序

所有的 loader 的执行顺序都是从下往上,从右往走来执行的.举例

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

上面那个 loader 里面, 在检查 scss 文件后缀名的时候,使用 user 里面的顺序是先执行 postcss-loader->sass-loader->css-loader->style-loader

loader 执行 import 引入第二类文件

举例: 有的时候我们在 sass 文件里面引入 @import’…css’ 但是它里面的文件执行的时候会跳过最开始的两部也就是 postcss-loader 和 sass-loader 直接执行 cssloader,而我我们不希望这样,所以需要直接加入 importLoaders:2

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          'sass-loader',
          'postcss-loader',
        ],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

局部引入 loader 里面的 css 这样不会污染全局变量

(1) 修改 webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js', //入口文件路径
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true, //开启局部
            },
          },
          'sass-loader',
          'postcss-loader',
        ],
      },
    ],
  },
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(2)文件里面引入的时候需要变化

import style from './index.scss'

var img = new Image()
img.src = avatar
img.classList.add(style.avaclass) //加载的就是index.scss里面写的css类名

var root = document.getElementById('root')
root.append(img)