简单版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]'}},{ // scsstest: /\.(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.htmlchunks: ['index']}),
]