Webpack｜教學：webpack多入口/多出口配置

webpack的基本配置是一個入口對應一個出口的文件，如果切版需要多個頁面的情況下要如何設置呢！？

1.webpack的單入口配置

module.exports = {
   ...
   entry: {main: './src/index.js'}, //入口文件
   output: {
      path: path.resolve(__dirname, 'dist'), //出口文件輸出的路徑
      filename: '[name].js' //出口文件，[name]為入口文件陣列的名稱main喔！
   },
   ...
}

2.webpack的多入口手動配置

在官網上可以看到多頁面應用時是這個樣子的

module.exports = {
   ...
   entry: {
      //入口文件設置
      pageOne: './src/pageOne/index.js', //入口文件1
      pageTwo: './src/pageTwo/index.js', //入口文件2
      pageThree: './src/pageThree/index.js' //入口文件3
   },
   output: {
      //出口文件設置
      path: path.resolve(__dirname, 'dist'), //出口文件輸出的路徑
      filename: '[name].js' //出口文件會有pageOne.js、pageTwo.js、pageThree.js
   },
   ...
}

但手動更新webpack.config的設定也是一件很繁雜的動作，那有沒有自動化的配置，答案是有的~

3.webpack多入口/多出口自動化配置

const getEntry = () => {
   const entry = {};
   glob.sync('./src/js/*.js').forEach((name) => {
      const start = name.indexOf('/src/js/') + 8; //前面路徑共8個位元的字串，設定的資料夾路徑不同，也要記得更改位元數喔!
      const end = name.length - 3; //減去附檔名 .js 共三個位元的字串
      const eArr = [];
      const n = name.slice(start,end); //取得每個js的名稱
      eArr.push(name); //push至陣列中
      entry[n] = eArr; //就會產生多筆入口的陣列囉！
   });
   return entry;
};
module.exports = {
   ...
   entry: getEntry(), //引入上一個步驟設定好的function
   output: {
      path: path.resolve(__dirname, './dist'),
      filename: './js/[name].min.js' //輸出成相同名稱的js檔
   },
   ...
}
Object.keys(config.entry).forEach((name) => {
   config.plugins.push(new HtmlWebpackPlugin({
      template:`./src/${name}.pug`, //這裡使用pug檔為例，設定為${name}就會抓取同個資料夾中所有.pug檔，並且記錄名稱
      filename: `${name}.html`, //將每個.pug輸出成相同名稱的html檔
      chunks:['js',`${name}`], //每個頁面只引入自己的JS
      minify: {
         collapseWhitespace: false, // 壓縮 HTML
      },
   }));
});

webpack多入口/多出口的配置方式就到這裡結束了， 而我的webpack.config.js及package.json設定放置在GitHub上(會不定時更新)，希望本篇有幫助到你自動化的處理出入口文件~

如果你有更好的處理方式也歡迎與我一起分享討論！！那我們下回再續吧~