Webpack4系列教程(三) JS相關配置

寫在前面

在這篇部落格中，我將會你介紹JS部分的相關配置

基本配置

我們先看一下目錄結構

打包時，根據entry配置

entry: { index: './src/index.js' }

並且我們在入口檔案裡引入了檔案base.js

require('./common/base.js');
console.log('我是入口檔案');

首先會執行base.js，然後執行index.js，
根據output配置

output: {
	path: path.resolve('dist'),
	filename: '[name].bundle.js'
},

會將這兩個檔案打包成一個檔案index.bundle.js，在dist目錄下

JS程式碼壓縮

在webpack3版本中我們如果要壓縮js程式碼需要外掛uglifyjs-webpack-plugin，但是webpack4中我們只需要配置mode: production（預設即開發模式）就可以了

編譯ES6

可參考
webpack4系列教程(二): 編譯ES6

第三方JS庫

可參考
webpack4 系列教程(十二)：處理第三方JavaScript庫