webpack对css模块的导出的总结(二)

1. 在项目中使用 less

安装 less-loader：

npm i less-loader -D

添加 rules：

  {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }

2. 使用MiniCssExtractPlugin

我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入CSS文件的方式实现呢？

这就需要使用一个插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已经不再支持ExtractTextWebpackPlugin的正式版，而测试版本又不够稳定，因此我们使用MiniCssExtractPlugin替代。首先安装：

npm install --save-dev mini-css-extract-plugin

在webpack.config.js 中引入并添加 plugins

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
    

修改 CSS 和 less 的 rules：

{
        test: /.css$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'less-loader'
        ]
      }

3. postcss-loader

postcss-loader 可以帮助我们处理CSS，如自动添加浏览器前缀

npm i -D postcss-loader autoprefixer

在根目录下创建 postcss.config.js：

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer({
      browsers: ['last 5 version']
    })
  ]
}

修改 css 和 less 的 rules：

{
        test: /\.css$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }