JS 文件的压缩,webpack内置了 uglifyjs-webpack-plugin,打包都是默认压缩了的
当然也可以手动安装
npm i -D uglifyjs-webpack-plugin
CSS 文件的压缩,使用 optimize-css-assets-webpack-plugin,同时使用 cssnano 预处理器(cssnano需要另外安装)
需要先安装这两个插件
npm i -D optimize-css-assets-webpack-pluginnpm i -D cssnano
配置
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')module.exports = {entry: {app: './src/app.js',search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path: __dirname + '/dist'},plugins: [+ new OptimizeCSSAssetsPlugin({+ assetNameRegExp: /\.css$/g,+ cssProcessor: require('cssnano’)+ })]};
html 文件的压缩,修改 html-webpack-plugin,设置压缩参数
安装插件
npm i -D html-webpack-plugin
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {app: './src/app.js',search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path: __dirname + '/dist'},plugins: [+ new HtmlWebpackPlugin({+ template: path.join(__dirname, 'src/search.html’),+ filename: 'search.html’,+ chunks: ['search’],+ inject: true,+ minify: {+ html5: true,+ collapseWhitespace: true,+ preserveLineBreaks: false,+ minifyCSS: true,+ minifyJS: true,+ removeComments: false+ }+ })]};