這篇文章學習一下webpack中entry, output, loader, plugin, mode的基本用法。

entry

概念：依賴入口

單入口

entry是一個字串

module.exports = {  entry: './src/index.js'}

多入口

entry是一個物件

module.exports = {  entry: {    app: './src/app.js',    admin: './src/admin.js'  }}

output

告訴webpack如何將編譯後的檔案輸出到哪裡

單入口輸出

module.exports = {    entry:{        index:'./src/index.js',        search:'./src/search.js'    },    output:{        path: path.join(__dirname,'dist'),        filename: 'bundle.js'    },    mode:'production'}

多入口輸出

module.exports = {    entry:{        index:'./src/index.js',        search:'./src/search.js'    },    // 多入口輸出，關鍵點：[name].js    output:{        path: path.join(__dirname,'dist'),        filename: '[name].js'    },    mode:'production'}

loaders

透過loaders去支援其他檔案型別並轉換為有效的模組，並新增到依賴圖中。

loader用法test:指定匹配規則use:指定使用的loader名稱

module.exports = {  module:{    rules: [      {        test:/\.js$/,        use:'babel-loader'      }    ]  }}

plugin

外掛用於bundle檔案的最佳化，資源管理和環境變數的注入。作用於整個構建過程。

plugin用法

把各個plugin放到plugins陣列中就行。

module.exports = {  plugins: [    new HtmlWebpackPlugin({      template: './src/index.html'    })  ]}

mode

用來指定當前的構建環境：production，development, none

設定mode可以使用webpack內建預設函式，預設是production