Community Learn Tools Library Leisure
search
English
Home > List of blog posts > webpack 打包多html
Blogger Information
Blog 70
fans 1
comment 0
visits 53041
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
webpack 打包多html
葡萄枝子
Original
1182 people have browsed it

webpack 打包多html

安装 node.js

安装 node.js https://nodejs.org/ （管理员身份）

安装 webpack

npm init -y

npm install webpack webpack-cli webpack-dev-server -D

  • 运行 webpack -v 报错，则以管理员身份运行 webstorm 或 vscode ，终端运行 set-ExecutionPolicy RemoteSigned ，以后可以不需管理员身份打开项目了。

安装 html-webpack-plugin 插件

npm install html-webpack-plugin -D

创建多个 html 文件

  • src/index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Index - Title</title>
    6. </head>
    7. <body>
    8. <p>Index page</p>
    9. </body>
    10. </html>

  • src/list.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>List - Title</title>
    6. </head>
    7. <body>
    8. <p>List page</p>
    9. </body>
    10. </html>

  • 其它 src/js/ 目录下文件

    1. // global.js
    2. module.exports = {
    3.     duble: (a) => a * 2,
    4. }
    1. // index.js
    2. let {duble} = require('./global');
    3. let one = require('./one');
    4. console.log('1 * 2 = ' + duble(one.a));
    1. // one.js
    2. module.exports = {
    3.     a: 1,
    4. }
    1. // two.js
    2. module.exports = {
    3.     b: 2,
    4. }

创建 webpack 配置

  • webpack.config.js

    1. const {resolve} = require("path");
    2. const htmlWebpackPlugin = require("html-webpack-plugin");
    3. module.exports = {
    4.     entry: {
    5.         main: ["./src/js/index.js"],
    6.         list: ["./src/js/one.js", "./src/js/two.js"]
    7.     },
    8.     output: {
    9.         path: resolve(__dirname, "dist"),
    10.         filename: "[name].js"
    11.     },
    12.     module: {
    14.     },
    15.     plugins: [
    16.         new htmlWebpackPlugin({
    17.             template: "./src/index.html",
    18.             filename: "index.html",
    19.             chunks: ["main"],
    20.             minify: {
    21.                 collapseWhitespace: true,
    22.                 removeComments: true,
    23.             }
    24.         }),
    25.         new htmlWebpackPlugin({
    26.             template: "./src/list.html",
    27.             filename: "list.html",
    28.             chunks: ["list"],
    29.             minify: {
    30.                 collapseWhitespace: true,
    31.                 removeComments: true,
    32.             }
    33.         })
    34.     ],
    35.     // mode: "development",
    36.     mode: "production"
    37. }

  • 终端运行 webpack 生成 dist 下四个打包文件

webpack打包多html

Correcting teacher：灭绝师太灭绝师太

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post