webpack的发布配置及优化详解

在plugins节点下的htmlWebpackPlugin插件中&＃xff0c;添加minify子节点&＃xff1a;

minify:{// 压缩HTML代码collapseWhitespace:true, // 合并空白字符removeComments:true, // 移除注释removeAttributeQuotes:true // 移除属性上的引号
}


其他优化项请参考&＃xff1a;html-minifier - github

.babelrc文件

{"presets": ["env", "stage-0"],"plugins": ["transform-runtime"]
}


package.json文件

{"name": "demo","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --port 3000 --hot", //开发运行配置端口及热部署"pub": "webpack --config webpack.pub.config.js" // 发布阶段&＃xff0c;指定开发配置},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.2.1" //生产依赖插件},"devDependencies": { // 开发依赖"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.6.1","babel-preset-stage-0": "^6.24.1","clean-webpack-plugin": "^0.1.17","css-loader": "^0.28.7","extract-text-webpack-plugin": "^3.0.2","file-loader": "^1.1.5","html-webpack-plugin": "^2.30.1","node-sass": "^4.6.0","optimize-css-assets-webpack-plugin": "^3.2.0","sass-loader": "^6.0.6","style-loader": "^0.19.0","url-loader": "^0.6.2","webpack": "^3.8.1","webpack-dev-server": "^2.9.4"}
}


webpack.config.js配置&＃xff08;作为开发阶段的配置&＃xff09;

const path &＃61; require(&＃39;path&＃39;)
const htmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;)module.exports &＃61; {entry: path.join(__dirname, &＃39;./src/main.js&＃39;),output: {path: path.join(__dirname, &＃39;./dist&＃39;),filename: &＃39;bundle.js&＃39;},plugins: [ // 插件new htmlWebpackPlugin({template: path.join(__dirname, &＃39;./src/index.html&＃39;),filename: &＃39;index.html&＃39;})],module: {rules: [{ test: /\.css$/, use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;] }, // css{ test: /\.scss$/, use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;sass-loader&＃39;] },{ test: /\.(png|gif|bmp|jpg)$/, use: &＃39;url-loader?limit&＃61;5000&＃39; },{ test: /\.js$/, use: &＃39;babel-loader&＃39;, exclude: /node_modules/ }]}
}


webpack.pub.config.js 上线打包配置文件

const path &＃61; require(&＃39;path&＃39;)
const htmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;)
// 导入每次删除文件夹的插件
const cleanWebpackPlugin &＃61; require(&＃39;clean-webpack-plugin&＃39;)
const webpack &＃61; require(&＃39;webpack&＃39;)
// 导入抽取CSS的插件
const ExtractTextPlugin &＃61; require("extract-text-webpack-plugin")
// 导入压缩CSS的插件
const OptimizeCssAssetsPlugin &＃61; require(&＃39;optimize-css-assets-webpack-plugin&＃39;)module.exports &＃61; {entry: { // 配置入口节点app: path.join(__dirname, &＃39;./src/main.js&＃39;),vendors1: [&＃39;jquery&＃39;] // 把要抽离的第三方包的名称&＃xff0c;放到这个数组中},output: {path: path.join(__dirname, &＃39;./dist&＃39;),filename: &＃39;js/bundle.js&＃39;},plugins: [ // 插件new htmlWebpackPlugin({template: path.join(__dirname, &＃39;./src/index.html&＃39;),filename: &＃39;index.html&＃39;,minify: {collapseWhitespace: true, // 合并多余的空格removeComments: true, // 移除注释removeAttributeQuotes: true // 移除 属性上的双引号}}),new cleanWebpackPlugin([&＃39;dist&＃39;]),new webpack.optimize.CommonsChunkPlugin({name: &＃39;vendors1&＃39;, // 指定要抽离的入口名称filename: &＃39;js/vendors.js&＃39; // 将来再发布的时候&＃xff0c;除了会有一个 bundle.js &＃xff0c;还会多一个 vendors.js 的文件&＃xff0c;里面存放了所有的第三方包}),new webpack.optimize.UglifyJsPlugin({compress: { // 配置压缩选项warnings: false // 移除警告}}),new webpack.optimize.DedupePlugin({ // 设置为产品上线环境&＃xff0c;进一步压缩JS代码&＃39;process.env.NODE_ENV&＃39;: &＃39;"production"&＃39;}),new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件new OptimizeCssAssetsPlugin()// 压缩CSS的插件],module: {rules: [{test: /\.css$/, use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader",publicPath: &＃39;../&＃39; // 指定抽取的时候&＃xff0c;自动为我们的路径加上 ../ 前缀})},{test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: &＃39;style-loader&＃39;,use: [&＃39;css-loader&＃39;, &＃39;sass-loader&＃39;],publicPath: &＃39;../&＃39; // 指定抽取的时候&＃xff0c;自动为我们的路径加上 ../ 前缀})},{ test: /\.(png|gif|bmp|jpg)$/, use: &＃39;url-loader?limit&＃61;5000&name&＃61;images/[hash:8]-[name].[ext]&＃39; },{ test: /\.js$/, use: &＃39;babel-loader&＃39;, exclude: /node_modules/ }]}
}