webpack4 提取和压缩css文件

1.如果你是用的 extract-text-webpack-plugin 插件进行提取的话很不幸在webpack4中他已经不支持

要想运行成功的话有俩种方法

1.1 npm install [email protected] 安装最新的beta版本

1.2 你也可以把你的webpack版本降低到3.* 版本

2.如果你的webpack是4版本不想改变的话就接着往下看

在4版本中采用了

mini-css-extract-plugin // 插件进行提取css文件

optimize-css-assets-webpack-plugin // 压缩css

所以让我们安装它

npm i -D mini-css-extract-plugin optimize-css-assets-webpack-plugin

3.在weback.config.js 引入和使用

// 使用min-css-extract-plugin 替代
const MiniCssExtract=require('mini-css-extract-plugin');
// 压缩css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件

module:{
       rules:[
           {
               // 使用正则表达式去匹配要用该Loader转换的CSS文件
               test:/\.css$/,
               use:[
                   {
                       loader:MiniCssExtract.loader,
                   },
                   "css-loader"
               ]
           }
       ]
   },

plugins:[
       new MiniCssExtract({
           // 从 .js文件中提出出来.css文件的名称放入到dist下的css文件目录下
           filename:"css/[name]_[contenthash:8].css", // 生成后放到 dist/css 原来的css文件名加上 8位随机生成的hash数值
           chunkFilename:"[id].css"
       }),
       new OptimizeCssAssetsPlugin()
   ]

4.运行测试

npm run start

webpack4 提取和压缩css文件

最后确实成功了最后祝大家也是一次性成功

webpack4 提取和压缩css文件

相关推荐