webpack配置檔案結構

webpack的配置包括以下幾個部分：
入口：entry
出口：output
模式： mode
模組： module
外掛：plugin

目錄結構

|-- src
    |--file.js
|-- node_module
|-- webpack.config.js
|-- package.json

學習步驟

1. 按照上面的目錄搭建專案
2. 安裝好webpack
3. npm install 下載需要的外掛
4. 在package.json中的script部分新增執行webpack的命令'config':'webpack --config webpack.config.json'
5. 在cmd中執行npm run config
6. 檢視生成的dist目錄和目錄下的bundle.js檔案

webpack.config.js檔案

const path = require('path');

module.exports = {
  entry: './src/file.js',
  output: {
    path: path.resolve(__dirname , 'dist'),//
    filename: 'myfirstwebpack.bundle.js'
  }
};

注意

1. path是node自帶的模組
2. entry填寫要處理的檔案的路徑
3. filename是生成的檔案的名稱
4. 由於這個例子中沒有使用其他外掛，所以就不貼packgage.json的檔案內容，下篇講到外掛時再寫

有問題可以檢視我的GitHub倉庫