Powered by md-Blog  文 - 篇  访客 -

【样式提取】mini-css-extract-plugin


更新:2020-03-24 16:26:24  /  创建:2020-03-20 21:40:15  /  分类:Webpack  / 
不要删除

对比

extract-text-webpack-plugin 相比:

  • 异步加载
  • 无重复编译
  • 用法简单
  • 支持css分割

安装

yarn add mini-css-extract-plugin -D

配置

webpack.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
        ],
        include: /src/, // 只转换src目录下
      }
    ],
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[hash].css',
            chunkFilename: '[id].[hash].css',
        })
    ]
}
不要删除

小站不易,感谢支持!