导入 html-webpack-plugin
包,打包html+JS
配置 webpack-config.js
文件目录
const { resolve } = require("path");
// 应用打包html插件
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
vendor: ["./src/js/jquery.js", "./src/js/common.js"],
index: "./src/js/index.js",
cart: "./src/js/cart.js",
},
// entry为对象时,配合以下output 会成成多个打包后的文件
output: {
filename: "[name].js",
path: resolve(__dirname, "build"),
},
plugins: [
// 默认会创建一个空的,目的就是自动引入打包的资源(js/css)
new htmlWebpackPlugin({
// 复制'./src/index.html'文件,并自动打包引入打包输出的所有资源(js/css)
template: "./src/index.html",
// 默认时index.html名称,通过filename设置输出文件名称
filename: "index.html",
chunks: ["index", "vendor"], //写入指定打包的文件名
minify: {
// 移除打包后的空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
}),
new htmlWebpackPlugin({
// 复制'./src/index.html'文件,并自动打包引入打包输出的所有资源(js/css)
template: "./src/cart.html",
// 默认时index.html名称,通过filename设置输出文件名称
filename: "cart.html",
chunks: ["cart", "vendor"],
}),
],
// production 打包后的代码用于上线,不会有多余的注释,性能达到对号
// development 打包后的代码会有注释,本地开发调试方便。
mode: "production", //生产模式 production,开发模式development
}
- 生成后的文件 vendor.js内引入common.js jquery.js
- index.js 打包 index.js
- cart.js 打包 cart.js
- index.html 打包
vendor.js
,index.js
-cart.html 打包cart.js
,vendor.js
-