配置Loader (CSS-Loader & Style-Loader 的关系)

Webpack可以以指定入口的一系列相互依赖的模块打包成一个文件，模块可以是js，也可以是其他类型的文件，但其他类型的文件需要对应的Loader转义

配置Loader的方式

在webpack.config.js文件的module.rules下配置，一个对象便配置了编译该类型文件的Loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, // 文件类型
        include: [],   // 查找文件的范围
        exclude: [],   // 查找文件需排除的文件夹
        use: ['loader']// 处理文件的Loader，可配置多个Loader
      }
    ]
  }
}

use配置

use是一个数组，其中可以配置多个Loader，webpack中多个Loader会按从右到左的顺序执行(原因：采用compose方式)

use数组可以包含字符串和对象

use字符串

如果use中包含的是字符串，则表示的是Loader的名称

use: ['style-loader', 'css-loader']

use对象

如果use包含的是对象，则对象中loader表示Loader加载器的名称，options表示Loader的额外配置，它是用来给Loader传参的

use: [{
    loader: 'babel-loader',
    options: { // 额外配置，用于给Loader传参
        presets: ['@babel/preset-env'], // presets设置的是当前JS的版本
        plugins: [require('@babel/plugin-transform-object-rest-spread')] // 需要的插件
    },
    // enforce :’post ’的含义是将该 Loader 的执行顺序放到最后
    // enforce 的值还可以是 pre，代表将 Loader 的执行顺序放到最前面 
    enforce : 'post'
}]

use: [{
    loader: 'file-loader',
    options: { // 不同的加载器，参数不同
        name: '[name].[hash:8].[ext]',
        publicPath: './images',
        outputPath: './images'
    }
}]

CSS模块

• 引入CSS的两种方式
  • 第一种：在引入CSS时，在最后生成的JS文件中进行处理，动态创建Style标签，放入head标签中
  • 第二种：在打包时，将CSS文件拆分出来，CSS相关模块最终打包到一个指定的CSS文件中，通过手动添加link标签去引入这个文件

Webpack编译CSS(第一种)

安装style-loader和css-loader模块，并在webpack.config.js中配置Loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
}

在遇到.css文件，Webpack会先用css-loader去解析这个文件，遇到@import等语句就将相应样式文件引入，最后所有的CSS将使用style-loader生成一个内容为最终解析完的CSS代码的Style标签，放到head标签里

第二种方式

使用extract-text-webpack-plugin插件，将css-loader和style-loader编译好的CSS文件抽离出来，放到一个单独问.css文件中，然后在index.html中使用link引入

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    }]
  },
  // CSS存放到style.css文件中
  plugins: [new ExtractTextPlugin("styles.css")]
}
// index.html 
// /dist/为输出文件，具体看自己的output配置
<link rel="stylesheet" href="./dist/style.css" type="text/css" />