2.自動化Webpack打包

1.目錄結構

2.搭建與執行

1.在根目錄新建webpack.config.js檔案此名稱固定不可更改，否則系統無法識別到

2.在根目錄初始化 npm init -y，生成pack.json檔案，如pack.json有依賴時 npm install安裝依賴。

3.引入絕對路徑

const path = require("path");

4.指定打包檔案出入口

const path = require("path");
module.exports = {
    // 指定打包入口檔案
    entry:"./src/main.js",
    outpath:{
        // 動態獲取路徑
        path:path.resolve(__dirname,'./dist'),
        // 指定打包出口檔案
        filename:"bundle.js"
    }
}
 

5.整合終端輸入webpack命令執行打包程式

6.將執行命令webpack修改為 npm run build

在package.json檔案中新增程式碼 "build":"webpack"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

3.開發依賴的安裝

在存在pack.json檔案的整合終端中執行npm install [email protected] --save-dev 完成安裝，此時package.json出現開發依賴程式碼

 "devDependencies": {
    "webpack": "^3.6.0"
  }

4.區域性執行與全域性執行

npm run build //區域性
webpack  //全域性

3.css-loader打包