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

webpack 打包多html

程序员文章站 2022-03-13 12:51:18
...

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

上一篇： HTML伪类、盒子模型学习与应用

下一篇： laravel 商城实战开发 Dingoapi 用户管理

推荐阅读