配置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会按从右到左的顺序执行

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')] // 须要的插件
    }
}]

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" />

复制代码