33const path = require ( "path" ) ;
44const webpack = require ( "webpack" ) ; // webpack核心
55const MiniCssExtractPlugin = require ( "mini-css-extract-plugin" ) ; // 为了单独打包css
6+ const CssMinimizerPlugin = require ( "css-minimizer-webpack-plugin" ) ; // 对CSS进行压缩
67const HtmlWebpackPlugin = require ( "html-webpack-plugin" ) ; // 生成html
78const AntdDayjsWebpackPlugin = require ( "antd-dayjs-webpack-plugin" ) ;
89const { CleanWebpackPlugin } = require ( "clean-webpack-plugin" ) ; // 每次打包前清除旧的build文件夹
10+ const WorkboxPlugin = require ( "workbox-webpack-plugin" ) ; // 用于生成PWA servers-worker.js
911const CopyPlugin = require ( "copy-webpack-plugin" ) ; // 用于直接复制public中的文件到打包的最终文件夹中
10- const SWPrecacheWebpackPlugin = require ( "sw-precache-webpack-plugin" ) ; // 生成一个server-worker用于缓存
1112const FaviconsWebpackPlugin = require ( "favicons-webpack-plugin" ) ; // 自动生成各尺寸的favicon图标
1213const TerserPlugin = require ( "terser-webpack-plugin" ) ; // 优化js
13- const OptimizeCSSAssetsPlugin = require ( "optimize-css-assets-webpack-plugin" ) ; // 压缩CSS
1414const webpackbar = require ( "webpackbar" ) ; // 进度条
1515/**
1616 * 基础路径
@@ -30,10 +30,11 @@ module.exports = {
3030 chunkFilename : "dist/[name].[chunkhash:8].chunk.js" ,
3131 } ,
3232 stats : {
33- warningsFilter : warning => / C o n f l i c t i n g o r d e r / gm. test ( warning ) , // 不输出一些警告,多为因CSS引入顺序不同导致的警告
33+ // warningsFilter: warning => /Conflicting order/gm.test(warning), // 不输出一些警告,多为因CSS引入顺序不同导致的警告
3434 children : false , // 不输出子模块的打包信息
3535 } ,
3636 optimization : {
37+ minimize : true ,
3738 minimizer : [
3839 new TerserPlugin ( {
3940 parallel : true , // 多线程并行构建
@@ -47,7 +48,7 @@ module.exports = {
4748 } ,
4849 } ,
4950 } ) ,
50- new OptimizeCSSAssetsPlugin ( { } ) ,
51+ new CssMinimizerPlugin ( ) ,
5152 ] ,
5253 splitChunks : {
5354 chunks : "all" ,
@@ -69,7 +70,7 @@ module.exports = {
6970 {
7071 // .less 解析
7172 test : / \. l e s s $ / ,
72- use : [ MiniCssExtractPlugin . loader , "css-loader" , "postcss-loader" , { loader : "less-loader" , options : { lessOptions :{ javascriptEnabled : true } } } ] ,
73+ use : [ MiniCssExtractPlugin . loader , "css-loader" , "postcss-loader" , { loader : "less-loader" , options : { lessOptions :{ javascriptEnabled : true } } } ] ,
7374 } ,
7475 {
7576 // 文件解析
@@ -134,26 +135,7 @@ module.exports = {
134135 * **/
135136 new MiniCssExtractPlugin ( {
136137 filename : "dist/[name].[chunkhash:8].css" , // 生成的文件名
137- } ) ,
138- /**
139- * 生成一个server-work用于缓存资源(PWA)
140- * */
141- new SWPrecacheWebpackPlugin ( {
142- dontCacheBustUrlsMatching : / \. \w { 8 } \. / ,
143- filename : "service-worker.js" ,
144- logger ( message ) {
145- if ( message . indexOf ( "Total precache size is" ) === 0 ) {
146- return ;
147- }
148- if ( message . indexOf ( "Skipping static resource" ) === 0 ) {
149- return ;
150- }
151- console . log ( message ) ;
152- } ,
153- minify : true , // 压缩
154- navigateFallback : PUBLIC_PATH , // 遇到不存在的URL时,跳转到主页
155- navigateFallbackWhitelist : [ / ^ (? ! \/ _ _ ) .* / ] , // 忽略从/__开始的网址,参考 https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
156- staticFileGlobsIgnorePatterns : [ / \. m a p $ / , / a s s e t - m a n i f e s t \. j s o n $ / , / \. c a c h e $ / ] , // 不缓存sourcemaps,它们太大了
138+ ignoreOrder : true , // 忽略因CSS文件引入顺序不一致而抛出的警告信息,多为antd内部css引起
157139 } ) ,
158140 // 拷贝public中的文件到最终打包文件夹里
159141 new CopyPlugin ( {
@@ -176,6 +158,14 @@ module.exports = {
176158 template : "./public/index.html" , // html模板路径
177159 hash : false , // 防止缓存,在引入的文件后面加hash (PWA就是要缓存,这里设置为false)
178160 inject : true , // 是否将js放在body的末尾
161+ // 正式环境,把注册service-worker的代码加入到index.html中
162+ registerServiceWorker : `<script>
163+ if ("serviceWorker" in navigator) {
164+ window.addEventListener("load", () => {
165+ navigator.serviceWorker.register("./service-worker.js");
166+ });
167+ }
168+ </script>` ,
179169 } ) ,
180170 /**
181171 * 自动生成各种类型的favicon图标
@@ -211,6 +201,13 @@ module.exports = {
211201 } ,
212202 } ,
213203 } ) ,
204+ /**
205+ * PWA - 自动生成server-worker.js
206+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW?hl=en
207+ * */
208+ new WorkboxPlugin . GenerateSW ( {
209+ skipWaiting : true ,
210+ } ) ,
214211 ] ,
215212 resolve : {
216213 extensions : [ ".js" , ".jsx" , ".less" , ".css" , ".wasm" ] , // 后缀名自动补全
0 commit comments