webpack学习-提取分离css文件插件 mini-css-extract-plugin

webpack学习-提取分离css文件插件 mini-css-extract-plugin

学习它的理由

1.如果将css和js等全部打包在一个chunk文件中,这个文件就会太大了.这时候就需要用到该插件进行提取.

2.几乎所有脚手架(vuecli,reactcli,taro,uni-app等等)都有使用它,你不学,有一些脚手架的问题,没法处理.

PS:笔者就被taro无法实别scss中的背景图和无法实别字体图标折磨了20多个工时(如果原来就会的话,花不了30秒,只用修改一处配置).

安装插件

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

webpack官方文档地址:v4.webpack.docschina.org/plugins/min…

插件使用

直接上代码,由webpack官方文档上摘取.

// webpack官方文档摘取
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 判断运行环境,只在生产环境才使用该插件
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // 生成文件名称,可以加上路径,如: ./css/[name].css
      filename: devMode ? '[name].css' : '[name].[hash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /.(sa|sc|c)ss$/,
        // 开发环境使用style-loader,生产环境使用 MiniCssExtractPlugin.loader
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}

使用就两步:

1.在plugins中new一个实体对象.

2.MiniCssExtractPlugin.loader替换掉style-loader的位置.

完