Webpack-環境安裝與基礎運用

Posted on April 23, 2019 本文总阅读量次

開發環境

Webpack是在Node.js環境下去執行的自動化工具，因此若要使用Webpack，首先電腦中必須安裝有Node.js開發環境

安裝Node.js，請參考文章：NVM-安裝及控管Node.js的版本

專案建立

先新增一個空的資料夾，並使用vsCode編譯器打開該資料夾
在資料夾中新增一個檔案，命名為webpack.config.js

正式安裝Webpack

接著正式安裝，可以先到Webpack getting staretd頁面，參考官方說明，執行後續載入webpack的流程

首先建構初始化專案
1
npm init -y
初始化建構執行完畢後，會看到專案中新增了一個package.json檔案，這個檔案中紀錄整個前端專案中用了哪些套件、指令。非常重要！不可刪除！

接著安裝webpack
1
npm install webpack --save-dev

Webpack4之後的版本都需要額外再安裝webpack-cli
1
npm install webpack-cli --save-dev

上述安裝完畢後，會發現專案中有幾處變更，如下圖
- 專案中多了一個node.modules的資料夾，裡面存放webpack在執行時，會依賴的其他第三方套件。
- 在可以在package.json檔案會發現多紀錄該專案使用多webpack、webpack-cli版本

webpack檔案建置

新增src資料夾，其中包含index.js檔案，在檔案中寫一些ES6程式碼
參考官網的範例程式碼，複製、貼上到檔案中
- path:path主要負責路徑處理的轉換，這裡做的事情，就是從node.js的模組抓進webpack中使用
- entry：高版本的Javascript
- output:輸出的版本，(檔案命名可以修正為index.bundle.js)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  const path = require('path');
  
  module.exports = {
  entry: './src/index.js',
  output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
  }
  };
在package.json檔案的script部分加入 “build”: “webpack”

啟用Webpack
在vscode的terminal輸入指令，啟動webpack
1
npm run build

自動將原先高版本的JS檔案-index.js，轉變為在dist資料夾中的index.bundle.js內容，可以看到轉換後仍是ES6語法，因為還差掛載loader作轉換

使用Babel-loader轉換語法

為了讓webpack識別原先的ES6程式碼內容，因此需要掛載Babel-loader

進到github開源頁面，依照提示安裝Babel-loader

將下方指令貼到vscode terminal中，”-D”會自動寫入package.json中
1
npm install -D babel-loader @babel/core @babel/preset-env webpack

接著來編輯webpack.config.js，將程式碼複製貼上

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

最後再執行一次webpack指令
1
npm run build

可以看到右邊是重新編譯後的內容，將原先左邊高版本ES6的箭頭函示，編譯為JS基本的function語法

在HTML中引入

最後，在HTML中引入js檔時，僅需引入一隻webpack bundle處理後的JS檔案

執行不同版本的webpack編譯

在package.json中的scripts中新增不同的簡化指令內容(命名可以不受限，但最好是大家有共識的命名方式)

watch：監看
start：開發版本

deploy：發行版本，會進行壓縮

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --mode development --watch",
    "start": "webpack --mode development",
    "deploy": "webpack --mode production"
  },

參考來源

YouTube影片：Webpack 前端自動化開發超入門