webpack多页面打包

最新推荐文章于 2023-01-09 00:46:01 发布

quick5g

最新推荐文章于 2023-01-09 00:46:01 发布

阅读量1.3k

点赞数 1

分类专栏：大前端文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/u013666742/article/details/122375437

版权

本文介绍了webpack如何进行多页面应用的打包，包括项目结构、单页面与多页面的打包配置，重点讲述了利用glob遍历实现多页面的自动化配置，并展示了打包后的dist文件结构。此外，还提供了一个生成目录树的辅助工具fileTree.js。

摘要由CSDN通过智能技术生成

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"),