webpack成果记录

Webpack 是前端资源加载/打包工具，可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

有一个项目想通过脚本自动生成发布包，特意研究了此打包工具，研究的主要内容如下：

（1）多个文件如何合并成一个。

（2）如何配置多个入口，每个入口单独输出。

（3）如何根据版本号生成不同的版本输出，以便保留版本记录。

（4）如何输出HTML，并自动添加输出的JS脚本。

（5）如何配置混淆器。

（6）如何拷贝静态文件。

（7）如何生成ZIP文件。

（8）为了调试方便，如何生成不压缩的脚本输出。

webpack.config.js配置如下：

const path = require('path'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const webpack = require('webpack'); const version = '1.0.1'; const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ZipWebpackPlugin = require('zip-webpack-plugin'); module.exports = {     //mode: 'development,production',     mode: "production",     entry: {         "drsp": [             './js/drsp.js'         ],         "drzb": [             './js/drzb.js'         ]     },     output: {         path: path.resolve('./dist/' + version + "/"), //输出位置         filename: 'js/[name].min.js' // 输出文件     },     plugins: [         new HtmlWebpackPlugin({ // 打包输出HTML             title: '测试界面',             minify: { // 压缩HTML文件                 removeComments: true, // 移除HTML中的注释                 collapseWhitespace: false, // 删除空白符与换行符                 minifyCSS: false // 压缩内联css             },             inject: "head", //js自动添加的位置             chunks: ['drsp'], //限制哪些JS自动添加             filename: 'view/drsp.html', //输入的文件名             template: 'view/drsp.html' //文件的来源模板         }),         new CopyWebpackPlugin({               patterns: [                 {                   from: './images/',                   to: path.resolve('./dist/' + version + "/images"),                   force:true                 },                 {                   from: './css/',                   to: path.resolve('./dist/' + version + "/css"),                   force:true                 }               ]             }),             new ZipWebpackPlugin ({               path:path.resolve('./dist'),               pathPrefix: "yst",               filename: 'yst'+version+'.zip'             })     ],     module: {         rules: [{             test: /\.js?$/,             exclude: /(node_modules|dist)/,             loader: 'babel-loader',             query: {                 presets: [                     '@babel/preset-env'                 ],             }         }]     },     optimization: {         minimizer: [             new UglifyJsPlugin({                 test: /\.js(\?.*)?$/i,             }),         ]     } };