JS文件和HTML文件的压缩
JS文件的压缩
index.js
function add(a, b) { return a + b; } console.log(add(1, 2));
此时进行webpack打包
打包后的build/build.js
HTML文件的压缩
HTML文件的压缩是在html-webpack-plugin内部进行配置
打包之前的html文件
进行webpack.config.js配置
const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports = { // 入口文件 entry: "./src/index.js", // 出口文件 output: { // 出口文件名称 filename: "bluid.js", // 智能合并路径,绝对路径 path: resolve(__dirname,'build') }, module: { rules: [ { // 识别.js结尾的文件 test: /\.js$/, // 不需要识别/翻译node_modules文件夹内部的内容 exclude: /node_modules/, // 使用的loader use: [ { loader: 'babel-loader', // 指导babel-loader进行翻译的配置工具 options: { presets: ['env'] // env 指的是ECMAScript New Version(ES的新版本) } } ] } ] }, plugins: [ // 配置html的文件 new HtmlWebpackPlugin({ // template表示是引入的模板文件地址 template: './src/index.html', // 压缩HTML代码 minify: { // 移除所有的空格 collapseWhitespace: true, // 移除注释 removeComments: true } }) ], // 打包模式 mode: 'development' }
打包后的html文件