webpack多入口打包示例代碼

更新時間：2023年12月27日 10:20:39 作者：海上彼尚

這篇文章主要介紹了webpack多入口打包的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

webpack多入口打包

首先得確定用webpack構(gòu)建的應(yīng)用，再然后后就是確定目錄。

這兩個js文件分別對應(yīng)兩個html文件，在 html中需要分別引入對應(yīng)的js文件。處理html中引入的問題可以使用 html-webpack-plugin 這個插件。

配置：

module.exports = {
    entry: {
        index: path.resolve(__dirname, "./src/index.js"),
        map: path.resolve(__dirname, "./src/map.js"),
    },
    plugins: {
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./public/index.html"),
            filename: "index.html",
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./public/map.html"),
            filename: "map.html",
        }),
    }
}

webpack：打包示例-打包多入口

入口

entry: {
    // 前臺
    index: './public/assets/js/index',  //打包入口項
    list: './public/assets/js/list',
    search: './public/assets/js/search',
    detail: './public/assets/js/detail',
    jquery: './public/assets/vendors/jquery/jquery.min.js',
    // 后臺
  },

出口

  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].bundle.js',  //多入口寫法--打包出同名文件
  },

對應(yīng)的插件

plugins: [
    //后臺
    //前臺
    new Webpack.ProvidePlugin({
      $: 'jquery'  //全局暴露的第三方庫      .不寫內(nèi)置模塊的話，報$ is not defined
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, './public/index.html'),
      chunks: ['index']          //多入口寫法--按需導(dǎo)入
    }),
    new HtmlWebpackPlugin({
      filename: 'list.html',
      template: path.join(__dirname, './public/list.html'),
      chunks: ['list']
    }),
    new HtmlWebpackPlugin({
      filename: 'search.html',
      template: path.join(__dirname, './public/search.html'),
      chunks: ['search']
    }),
    new HtmlWebpackPlugin({
      filename: 'detail.html',
      template: path.join(__dirname, './public/detail.html'),
      chunks: ['detail']
    })
  ],

完整截圖

在這里插入圖片描述