网站百度,汽车最全的网站,邯郸微信小程序制作公司,松溪网站建设wzjseo1.背景描述
使用mini-css-extract-plugin插件来打包css文件#xff08;从css文件中提取css代码到单独的文件中#xff0c;对css代码进行代码压缩等#xff09;。
本次采用三个配置文件#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 i -D mini-css-extract-plugin webpack-merge html-webpack-plugin
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const devMode process.env.NODE_ENV ! production
const path require(path);module.exports {entry: ./src/index.js,devServer: {static: /dist},module: {rules: [{test: /\.(sa|sc|c)ss$/, // 可以打包后缀为sass/scss/css的文件use: [{loader: MiniCssExtractPlugin.loader,options: {// 指定一个 publicPath,默认使用 webpackOptions.output中的publicPath// publicPath的配置和plugins中设置的filename和chunkFilename的名字有关// 如果打包后background属性中的图片显示不出来请检查publicPath的配置是否有误// publicPath: ./src,publicPath: devMode ? ./src : ./src, // 根据不同环境指定不同的publicPath},},css-loader,// sass-loader],},]},plugins: [// 创建了一个全新的html文件所有的 bundle 都自动添加到其中。new HtmlWebpackPlugin({title: development}),// css代码分离new MiniCssExtractPlugin({// 这里的配置和webpackOptions.output中的配置相似// 即可以通过在名字前加路径来决定打包后的文件存在的路径filename: devMode ? css/[name].css : css/[name].[hash].css,chunkFilename: devMode ? css/[id].css : css/[id].[hash].css,})],output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),// 每次构建前清理 /dist 文件夹clean: true,},optimization: {// 进行代码分离splitChunks: {chunks: all,},}
}
3.webpack.dev.jsdev环境的配置文件
dev环境的配置记得把mode设置为development模式否则webpack4以后会默认为production模式。
npm i -D webpack-merge
注意引入merge是使用 { merge } 形式
const { merge } require(webpack-merge);
const common require(./webpack.common);module.exports merge(common, {// dev环境的配置记得把mode设置为development模式否则webpack会默认为production模式。mode: development,// 可以将编译后的代码映射回原始源代码,便于追踪 error 和 warning(浏览器中打开生成的 index.html 文件点击按钮后控制台将会报错)devtool: inline-source-map,
});
4.webpack.prod.js生产环境的配置文件
生产环境的配置默认开启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 { merge } require(webpack-merge);
const common require(./webpack.common);
// 生成环境下对JS进行压缩
const TerserJSPlugin require(terser-webpack-plugin);
// 生成环境下对CSS进行压缩
const CssMinimizerWebpackPlugin require(css-minimizer-webpack-plugin);module.exports merge(common, {// dev环境的配置记得把mode设置为development模式否则webpack会默认为production模式。mode: production,devtool: source-map,optimization: {minimizer: [new TerserJSPlugin({}), new CssMinimizerWebpackPlugin({})],splitChunks: {cacheGroups: {styles: {name: styles,test: /\.css$/,chunks: all,enforce: true,},}},}
});
和dev环境同样的配置会报以下警告页面也渲染不出来 使用css-minimizer-webpack-plugin和terser-webpack-plugin插件也无法正常启动
解决
是因为使用了devtool:inline-source-map选项配置后报警告改为devtool:source-map后启动正常
5.package.json配置文件
sideEffects 生产环境打包的时候会默认开启tree-shaking如果不设置sideEffects某些通过import方式引入的css文件可能不会被打包因为tree-shaking会甩掉没有导出任何东西即文件中没有export关键字的文件。所以不希望被tree-shaking的文件请在sideEffects中配置与之匹配的正则表达式如下在package.json中添加。NODE_ENV 由于项目中用到了Node的环境变量所以打包时需通过NODE_ENV传入环境变量。例如script:{ dev: set NODE_ENVdevelopment webpack serve --open --config ./webpack.dev.js --modedevelopment}。
{sideEffects: [*.css,*.scss,*.sass],scripts: {dev: set NODE_ENVdevelopment webpack serve --open --config ./webpack.dev.js --modedevelopment,prod: set NODE_ENVproduction webpack serve --open --config ./webpack.prod.js --modeproduction},
}6.总结
不同环境下的打包如果出现图片显示不了时特别是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博客
