亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 WebPack 輸出中包含多個頁面?

如何在 WebPack 輸出中包含多個頁面?

MM們 2023-08-05 19:28:07
我正在使用 WebPack 編譯 ColdFusion 應用程序,一切似乎都編譯得很好。正如您從下面的配置中看到的,我還嘗試在 dist 文件夾中包含一個 HTML 文件,并確保在顯示應用程序時調用它。const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const HtmlWebPackPlugin = require("html-webpack-plugin");module.exports = {  mode: "production",  entry: {    vendor: "./src/vendor.js",    main: "./src/index.js"  },    output: {    filename: "[name].[contenthash].bundle.js",    path: path.resolve(__dirname, "dist")  },  plugins: [    new HtmlWebPackPlugin({      template: "./src/template.cfm",      filename: "index.cfm",      minify: false    }),    new HtmlWebPackPlugin({        template: "./src/help.html",        filename: "help.html",    }),      new CleanWebpackPlugin({      cleanOnceBeforeBuildPatterns: ['**/*', '!application.cfc']    })  ],  module: {    rules: [            {                test: /\.html$/,                use: ["html-loader"],            },                  {                test: /\.css$/,                use: [                    "style-loader", //3. inject styles into dom                    "css-loader", //2. turns css into common js                ],            },            {                test: /\.scss$/,                use: [          "style-loader",           "css-loader",           "sass-loader"        ],            }    ]  }  };
查看完整描述

1 回答

?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

module.exports = {


? entry: {

? ? index: './src/index.js'

? },


? // ...


? plugins: [

? ? new HtmlWebpackPlugin({

? ? ? ? template: './src/index.html',

? ? ? ? inject: true,

? ? ? ? chunks: ['index'],

? ? ? ? filename: 'index.html'

? ? }),

? ]

};

上面我們index.js在每個頁面中重用文件chunks: [‘index’]來更改此設置,只需添加新的Javascript文件about.js contacts.js,然后在條目配置中使用這些文件并在配置選項中引用它 HtmlWebpackPlugin:


//...

entry: {

? ? index: './src/index.js',

? ? about: './src/about.js',?

? ? contacts: './src/contacts.js'

},

//...

plugins: [

? new HtmlWebpackPlugin({

? ? ? template: './src/about.html',

? ? ? inject: true,

? ? ? chunks: ['about'],

? ? ? filename: 'about.html'

? }),

所以你需要在entry使用的塊中聲明plugins。


查看完整回答
反對 回復 2023-08-05
  • 1 回答
  • 0 關注
  • 100 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號