欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

webpack 打包多html

程序员文章站 2022-03-03 23:36:13
...

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. 

    2. <html lang="en">
      3. 

    3. <head>
      4. 

    4.     <meta charset="UTF-8">
      5. 

    5.     <title>Index - Title</title>
      6. 

    6. </head>
      7. 

    7. <body>
      8. 

    8. <p>Index page</p>
      9. 

    9. </body>
      10. 

    10. </html>
      11.

  • src/list.html

      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="en">
      3. 

    3. <head>
      4. 

    4.     <meta charset="UTF-8">
      5. 

    5.     <title>List - Title</title>
      6. 

    6. </head>
      7. 

    7. <body>
      8. 

    8. <p>List page</p>
      9. 

    9. </body>
      10. 

    10. </html>
      11.

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

      

    1. // global.js
      2. 

    2. module.exports = {
      3. 

    3.     duble: (a) => a * 2,
      4. 

    4. }
      5. 

      

    1. // index.js
      2. 

    2. let {duble} = require('./global');
      3. 

    3. let one = require('./one');
      4. 

    4. console.log('1 * 2 = ' + duble(one.a));
      5. 

      

    1. // one.js
      2. 

    2. module.exports = {
      3. 

    3.     a: 1,
      4. 

    4. }
      5. 

      

    1. // two.js
      2. 

    2. module.exports = {
      3. 

    3.     b: 2,
      4. 

    4. }
      5.

创建 webpack 配置

  • webpack.config.js

      

    1. const {resolve} = require("path");
      2. 

    2. const htmlWebpackPlugin = require("html-webpack-plugin");
      3. 

    3. module.exports = {
      4. 

    4.     entry: {
      5. 

    5.         main: ["./src/js/index.js"],
      6. 

    6.         list: ["./src/js/one.js", "./src/js/two.js"]
      7. 

    7.     },
      8. 

    8.     output: {
      9. 

    9.         path: resolve(__dirname, "dist"),
      10. 

    10.         filename: "[name].js"
      11. 

    11.     },
      12. 

    12.     module: {
      13. 

      14. 

    14.     },
      15. 

    15.     plugins: [
      16. 

    16.         new htmlWebpackPlugin({
      17. 

    17.             template: "./src/index.html",
      18. 

    18.             filename: "index.html",
      19. 

    19.             chunks: ["main"],
      20. 

    20.             minify: {
      21. 

    21.                 collapseWhitespace: true,
      22. 

    22.                 removeComments: true,
      23. 

    23.             }
      24. 

    24.         }),
      25. 

    25.         new htmlWebpackPlugin({
      26. 

    26.             template: "./src/list.html",
      27. 

    27.             filename: "list.html",
      28. 

    28.             chunks: ["list"],
      29. 

    29.             minify: {
      30. 

    30.                 collapseWhitespace: true,
      31. 

    31.                 removeComments: true,
      32. 

    32.             }
      33. 

    33.         })
      34. 

    34.     ],
      35. 

    35.     // mode: "development",
      36. 

    36.     mode: "production"
      37. 

    37. }
      38.

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

webpack 打包多html

上一篇： 一个领导如何获得团队成员的尊重和信任

下一篇： 互联网医疗新政出台 野蛮生长过后是创业者的深思

推荐阅读