webpack生产阶段的配置

蔚落 2022-02-28 01:08 272阅读 0赞

## 开发–测试–生产 ##

### 开发版 ###

[这是开发版本的配置][Link 1]  
webpack.config.js

const path = require('path') //使用node的path模块，来构建路径
    const htmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = { 
        entry:path.join(__dirname,'/src/main.js'),
        output:{ 
            path:path.join(__dirname,'/dist'),
            filename:'bundle.js'
        },
        plugins:[
            new htmlWebpackPlugin({ 
                template:path.join(__dirname,'/src/index.html'),
                filename:'index.html'
            })
        ],
        module: { 
            rules: [
              { test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[name]_[local]-[hash:5]']},
              { test:/\.less$/,use:['style-loader','css-loader','less-loader']},
              { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
              { test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'},
              { test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
              { 
                test:/\.jsx?$/,
                use: { 
                    loader: 'babel-loader',
                    options: { 
                      presets: ['@babel/preset-env','@babel/preset-react'],
                      plugins: ['@babel/transform-runtime']
                    }
                  },
                exclude: /node_modules/,        
            },
            ]
        }
    }

### 对插件和配置的了解 ###

1.  我们进行打包无非就是抽离，压缩。打包成规范较小的文件
2.  [webpack-clean-plugin][] :检阅打包的文件目录是否存在旧文件，是的话进行清理(在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。)
3.  [html-webpack-plugin][]:在内存生成新的文件，并将打包的bundle.js文件注入,我们可以利用它压缩我们的HTML代码
4.  [uglifyjs-webpack-plugin][] : 这个插件用来压缩下我们的JS文件
5.  [mini-css-extract-plugin][] : 提取我们的css文件，还有可以配置对我们引入的背景图片的处理
6.  [optimize-css-assets-webpack-plugin][] 压缩我们的css文件
7.  [optimization][] webpack内置，可以在这里抽离我们的第三方包
8.  配置为生产环境

module.exports = { 
        mode: 'production',
    }

### webpack.pub.config.js ###

1.  在项目根目录新建该文件webpack.pub.config.js，到时再package.json进行配置
2.  我们可以把开发版的文件复制过来，到时进行改造即可
3.  在package.json文件新增命令，通过–config指令指定webpack要读取的文件

"dev": "webpack-dev-server --open --port 3000 --hot",
        "build": "webpack --config webpack.pub.config.js"

1.  每次重新构建时删除dist目录，这样不用我们在构建自己手动去删除  
    [clean-webpack-plugin的配置][webpack-clean-plugin]

cnpm i clean-webpack-plugin --save-dev

在webpack.pub.config.js

const cleanWebpackPlugin = require('clean-webpack-plugin')
    ...
    module.exports = { 
    	...
    	plugins:[
            ...
            new cleanWebpackPlugin()
        ],
        ...
    }

1.  改造入口节点entry  
    venders:把要抽离的第三方包的名称，放到这个数组

entry:{ 
            app:path.join(__dirname,'/src/main.js'),
        },

1.  改造出口文件，将bundle放在js文件夹下

output:{ 
            path:path.join(__dirname,'/dist'),
            filename:'js/bundle.js',
        },

1.  使用html-webpack-plugin压缩html文件，配置minify

new htmlWebpackPlugin({ 
                template:path.join(__dirname,'/src/index.html'),
                filename:'index.html',
                minify:{  //压缩HTML代码
                    collapseWhitespace: true, //移除空白符
                    removeComments: true, //移除注释
                    removeAttributeQuotes:true, //移除属相上的引号
                    removeRedundantAttributes: true,  //移除多余的属性
                }
            }),

1.  配置optimization.splitChunks来分离bundle.js

module.exports = { 
    ...
    	plugins:[...],
        optimization:{ 
            splitChunks:{ 
                chunks:'all',//默认三选一 "initial" | "all"(推荐) | "async"
                minSize: 30000, //最小尺寸
                cacheGroups:{  //从这里开始设置缓存组
                    vendor: { 
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        priority: 10,
                        enforce: true,
                        filename:'js/vendor.js'//生成第三方包的名字
                    },
                    // common可以定义分离前引用规定次数的文件，一同打包到common.js
                    common:{ 
                        name: "common",
                        minChunks: 2,//2次
                        minSize: 30
                    }
                },   
            },
            minimize: false
        },
    ...
    }

1.  压缩js文件

cnpm install uglifyjs-webpack-plugin --save-dev

我按文档配置入了optimization发现并不生效，我觉得它是个插件，所以配置在了plugins，结果可以  
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);  
module.exports = \{  
optimization: \{  
minimizer: \[new UglifyJsPlugin()\],  
\},  
\};

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    ...
    	plugins:[
    		new UglifyJsPlugin(),
    	]

1.  图片打包的时候加上images文件夹

{ test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]'},

1.  抽离CSS文件

cnpm i mini-css-extract-plugin -D

**抽取以.css$的文件，从bundle.js分离出来**

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    ...
    	plugins:[
    		new MiniCssExtractPlugin({ 
                filename: "css/[name].css"// 提取出来的css文件路径以及命名
            }),
    	]
    	module:{ 
    		rules:{ 
    			{ test:/\.css$/,use:['style-loader',MiniCssExtractPlugin.loader,'css-loader?modules&localIdentName=[name]_[local]-[hash:5]']},
    		}
    	}

**如果有背景图片，还需要给其加上配置，这里以less为例**

{ test:/\.less$/,use:['style-loader',
                { 
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: '../'
                    }
                },
              'css-loader',
              'less-loader'
              ]},

1.  压缩CSS文件

cnpm i optimize-css-assets-webpack-plugin -D

这个名字那么长，感觉就是用来干大事，发现新大陆的feel；其实它只是用来压缩css文件而已

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    ...
    	plugins:[
    		new OptimizeCssAssetsPlugin({ 
                    assetNameRegExp: /\.(css|less|scss)$/g,       //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
                    cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
                    cssProcessorOptions: {  safe: true, discardComments: {  removeAll: true } }, //传递给cssProcessor的选项，默认为{}
                    canPrint: true  //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
            })
    	]

### 总结 ###

写这篇文章前，真的是黑人问号；之前插件都不能用了，比如，extract-text-webpack-plugin（extract-text-webpack-plugin），以为可以通过佛家冥想道家入定就能解决问题，不过不管怎么run都没办法，通过百度和webpack的文档来配置  
这是每次打包文件的记录  
![大小][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

--------------------

[split chunks plugin][]  
[webpack入门了解][webpack]  
[webpack中文配置文档][webpack 1]  
[html-webpack-plugin][html-webpack-plugin 1]

const path = require('path') 
    const htmlWebpackPlugin = require('html-webpack-plugin')
    const cleanWebpackPlugin = require('clean-webpack-plugin')
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    
    module.exports = { 
        entry:path.join(__dirname,'/src/main.js'),
        output:{ 
            path:path.join(__dirname,'/dist'),
            filename:'js/bundle.js'
        },
        plugins:[
            new UglifyJsPlugin(),
            new htmlWebpackPlugin({ 
                template:path.join(__dirname,'/src/index.html'),
                filename:'index.html',
                minify:{ 
                    collapseWhitespace: true, 
                    removeComments: true, 
                    removeAttributeQuotes:true, 
                    removeRedundantAttributes: true,  
                }
            }),
            new cleanWebpackPlugin(),
            new MiniCssExtractPlugin({ 
                filename: "css/[name].css"
            }),
            new OptimizeCssAssetsPlugin({ 
                assetNameRegExp: /\.(css|less|scss)$/g,   
                cssProcessor: require('cssnano'),
                cssProcessorOptions: {  safe: true, discardComments: {  removeAll: true } }, 
                canPrint: true  
            })
        ],
        optimization:{ 
            splitChunks:{ 
                chunks:'all',
                minSize: 30000, 
                cacheGroups:{  
                    vendor: { 
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        priority: 10,
                        enforce: true,
                        filename:'js/vendor.js'//生成第三方包的名字
                    },
                    common:{ 
                        name: "common",
                        minChunks: 2,//2次
                        minSize: 30
                    }
                },   
            },
            minimize: false,
        },
        module: { 
            rules: [
              { test:/\.css$/,use:['style-loader',MiniCssExtractPlugin.loader,'css-loader?modules&localIdentName=[name]_[local]-[hash:5]']},
              { test:/\.less$/,use:['style-loader',
                { 
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: '../'
                    }
                },
              'css-loader',
              'less-loader'
              ]},
              { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
              { test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]'},
              { test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
              { 
                test:/\.jsx?$/,
                use: { 
                    loader: 'babel-loader',
                    options: { 
                      presets: ['@babel/preset-env','@babel/preset-react'],
                      plugins: ['@babel/transform-runtime']
                    }
                  },
                exclude: /node_modules/,        
            },
            ]
        }
    }

[Link 1]: https://blog.csdn.net/weixin_41105030/article/details/88762116
[webpack-clean-plugin]: https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder
[html-webpack-plugin]: https://webpack.js.org/plugins/html-webpack-plugin/#root
[uglifyjs-webpack-plugin]: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#root
[mini-css-extract-plugin]: https://webpack.js.org/plugins/mini-css-extract-plugin/#root
[optimize-css-assets-webpack-plugin]: https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production
[optimization]: https://webpack.js.org/configuration/optimization/#root
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220228/e6412bd55c54408e901ebf136ac1d1ac.png
[split chunks plugin]: https://www.jb51.net/article/147552.htm
[webpack]: http://www.runoob.com/w3cnote/webpack-tutorial.html
[webpack 1]: https://webpack.docschina.org/guides/development/
[html-webpack-plugin 1]: https://github.com/jantimon/html-webpack-plugin#options