webpack多页面打包
示例项目结构
|--- src
|--- |--- components
|--- |--- pages
|--- |--- |--- about
|--- |--- |--- |--- index.html
|--- |--- |--- |--- index.js
|--- |--- |--- index
|--- |--- |--- |--- index.html
|--- |--- |--- |--- index.js
|--- |--- utils
|--- |--- |--- fileTree.js
|--- |--- index.html
|--- |--- main.js
|--- package.json
|--- webpack.config.js
|--- webpack.config1.js
单页面打包
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
};
多页面打包
- webpack.config1.js
const path = require("path");
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
mode: "development",
entry: {
index: path.join(__dirname, "src/pages/index/index.js"),
about: path.join(__dirname, "src/pages/about/index.js"),
},
output: {
path: path.join(__dirname, "dist"),
filename: "js/[name]_[contenthash:8].js",
clean: true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "index.html", // 不指定名称会报错: ERROR in Conflict: Multiple assets emit different content to the same filename
template: path.join(__dirname, "src/pages/index/index.html"),