简单版webpack创建多页面应用，只要把配置文件复制下来，然后npm安装相应插件，正常是能跑起来了
创建
- 初始化
npm init生成package.json文件 - 安装
webpack
npm i -D webpack webpack-cli webpack-dev-server - 创建
main.js入口文件和webpack.config.js文件 - 安装
html-webpack-plugin
文件打包好之后，我们不可能每次在html文件钟手动引入打包好的js，这时候就需要使用html-webpack-plugin创建html页面，并将打包后的js文件引入到html中 scss、bootstrap那些按需引入，具体可以直接复制下方的package.json文件，然后直接执行npm i下载相关的插件
配置文件
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
mode: 'development',
entry: { // 入口文件
main: path.resolve(__dirname, './src/main.js'),
home: path.resolve(__dirname, './src/js/home.js'),
aboutus: path.resolve(__dirname, './src/js/aboutus.js')
},
output: { // 出口文件
path: path.resolve(__dirname, 'dist'),
filename: "./js/[name].js",
assetModuleFilename: 'img/[hash][ext][query]'
},
devServer: {
hot: true
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
module: {
// webpack 本身只支持处理js, json文件，将其他转换成有效模块
rules: [
{
test: /.html$/,
loader: 'html-loader',
options: {
esModule: false
}
},
{ // 样式
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
// "style-loader",
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[hash:base64:8]',
}
}
}
]
},
{ // 图片
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset',
generator: {
filename: 'image/[name].[contenthash:8][ext][query]'
}
},
{ // scss
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
// "style-loader",
"css-loader",
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
]
}
}
},
'sass-loader'
],
},
],
},
resolve: {
alias: {
"@": resolve('src')
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/pages/index.html'),
filename: 'index',
chunks: ['index']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "./src/pages/home.html"),
filename: 'home',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/pages/aboutus.html'),
filename: 'aboutus',
chunks: ['aboutus']
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].[fullhash].css'
})
]
}
// package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "webpack-dev-server --port 3001 --hot --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"css-minimizer-webpack-plugin": "^7.0.0",
"html-loader": "^5.1.0",
"html-webpack-plugin": "^5.6.0",
"mini-css-extract-plugin": "^2.9.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"dependencies": {
"bootstrap": "^5.3.3",
"css-loader": "^7.1.2",
"jquery": "^3.7.1",
"node-sass": "^9.0.0",
"postcss-loader": "^8.1.1",
"sass": "^1.77.8",
"sass-loader": "^14.2.1",
"style-loader": "^4.0.0"
}
}
问题
output配置了一个出口导致报错
多入口也要多出口，输出的文件也要是多个：
entry: {
main: path.resolve(__dirname, './src/main.js'),
home: path.resolve(__dirname, './src/js/home.js'),
aboutus: path.resolve(__dirname, './src/js/aboutus.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "./js/[name].js", // 正确写法
// filename: './js/bundle.js', // 错误写法
assetModuleFilename: 'img/[hash][ext][query]'
},
html-webpack-plugin配置不正确导致页面404
除了index.html能正常显示外，其他页面都显示404，一开始以为是路由配置或者入口没设置正确，后面发现filename跟其他不一样就试了一下，没想到真是这里的问题
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/pages/index.html'),
filename: 'index', // 这里必须跟地址一样。如这里写的是 index.html 的话，链接上必须也要带上.html，即 localhost:3001/index.html
chunks: ['index']
}),
]
