本次采用三个配置文件#xff1a;

公共配置文件#xff1a;webpack.common.jsdev开发环境配置文件#x…1.背景描述

使用mini-css-extract-plugin插件来打包css文件从css文件中提取css代码到单独的文件中对css代码进行代码压缩等。

本次采用三个配置文件

公共配置文件webpack.common.jsdev开发环境配置文件webpack.dev.jsprod生产环境配置文件webpack.prod.js

2.webpack.common.js

开发环境和生产环境共用的配置借助webpack-merge插件可以merge到开发或生产环境从而减少重复配置。

引入了Node环境变量process.env.NODE_ENV可以根据传入的环境参数动态更改配置具体请看代码。

npm

require(mini-css-extract-plugin);

const

MiniCssExtractPlugin.loader,options:

{//

webpackOptions.output中的publicPath//

publicPath的配置和plugins中设置的filename和chunkFilename的名字有关//

如果打包后background属性中的图片显示不出来请检查publicPath的配置是否有误//

publicPath:

根据不同环境指定不同的publicPath},},css-loader,//

[//

这里的配置和webpackOptions.output中的配置相似//

即可以通过在名字前加路径来决定打包后的文件存在的路径filename:

devMode

css/[name].[hash].css,chunkFilename:

devMode

css/[id].[hash].css,})],output:

{filename:

dev环境的配置记得把mode设置为development模式否则webpack4以后会默认为production模式。

npm

require(./webpack.common);module.exports

merge(common,

dev环境的配置记得把mode设置为development模式否则webpack会默认为production模式。

mode:

development,//

生产环境的配置默认开启tree-shaking和js代码压缩通过optimize-css-assets-webpack-plugin插件可以对css进行压缩与此同时必须指定js压缩插件例子中使用terser-webpack-plugin插件否则webpack不再对js文件进行压缩(webpack5中不再支持optimize-css-assets-webpack-plugin插件而是使用css-minimizer-webpack-plugin)设置optimization.splitChunks.cacheGroups可以将css代码块提取到单独的文件中。

注意生产环境必须使用devTool:source-map否则报警告页面渲染不出来

const

require(terser-webpack-plugin);

生成环境下对CSS进行压缩

require(css-minimizer-webpack-plugin);module.exports

merge(common,

dev环境的配置记得把mode设置为development模式否则webpack会默认为production模式。

mode:

production,devtool:

CssMinimizerWebpackPlugin({})],splitChunks:

{cacheGroups:

使用css-minimizer-webpack-plugin和terser-webpack-plugin插件也无法正常启动

是因为使用了devtool:inline-source-map选项配置后报警告改为devtool:source-map后启动正常

5.package.json配置文件

生产环境打包的时候会默认开启tree-shaking如果不设置sideEffects某些通过import方式引入的css文件可能不会被打包因为tree-shaking会甩掉没有导出任何东西即文件中没有export关键字的文件。

所以不希望被tree-shaking的文件请在sideEffects中配置与之匹配的正则表达式如下在package.json中添加。

NODE_ENV

由于项目中用到了Node的环境变量所以打包时需通过NODE_ENV传入环境变量。

例如script:{

dev:

不同环境下的打包如果出现图片显示不了时特别是css中的图片请检查publicPath的配置。

mode:

production会开启tree-shaking和js代码压缩但配置optimization.

minimizer会使默认的压缩功能失效。

所以指定css压缩插件的同时务必指定js的压缩插件。

mini-css-extract-plugin插件结合optimization.splitChunks.cacheGroups配置可以把css代码打包到单独的css文件且可以设置存放路径通过设置插件的filename和chunkFilename。

生产环境下不能使用devtool:inline-source-map而用devtool:source-map

参考mini-css-extract-plugin插件快速入门_mn_front的博客-CSDN博客