Webpack-引入模組運用

Posted on June 14, 2019 本文总阅读量次

環境建置

1. 首先在專案中加入 npm

npm init

or 加上-y可以快速建立，略過中間自定義中間自定義的項目輸入

1	npm init -y

完畢之後，會看到多了一個 package.json 檔案，並產生一些基本的內容

2. 安裝「開發環境」套件依賴(視需求安裝)

1	npm install webpack webpack-cli babel-loader babel-core css-loader vue-loader vue-template-compiler -D

指令後方加上-D 是--save-dev的縮寫，表示會將安裝的套件記載在 package.json 中的 devDependencies

webpack:轉換並打包程式碼
webpack-cli:用以執行 Webpack 命令
babel-loader:將 ES6 語法轉換為 ES5 需要搭配下面兩個插件依賴使用）
- @babel/core & @babel/preset: Babel-loader 本身無法作用，必須搭配這兩個插件才能將 ES6 語法轉換為 ES5
css-loader:將撰寫的 css 檔，使用 imports 和 url(…) 來回傳到 JavaScript 檔案中，通常都還會搭配 style-loader 作解析的動作。
vue-loader:將 vue 檔案轉換為 JavsSript
vue-template-compiler:將 vue 檔案轉換為 JavsSript

3. 安裝「生產環境」套件依賴，例：vue(視需求安裝)

1	npm install vue -P

指令後方加上-P 是預設值可以不加，表示會將安裝的套件記載在 package.json 中的 dependencies

or 在指令後方加上-S

1	npm install vue -S

指令後方加上-S 是--save的縮寫，表示會將安裝的套件記載在 package.json 中的 dependencies

vue: JS 前端框架

Webpack 概念說明

首先定義一個入口 js 檔案，而讓其他所有的 js 檔案都通過這個入口檔案，去執行底下的腳本。

而 Webpack 的執行入口也就是這個入口檔案，通過打包之後，最終會產生出 bundle 後的檔案。

最後，在 html中 script 讀取的檔案，則是打包後的檔案。

專案結構建置

創建一個 src 資料夾，代表其中的文件為 sourse 來源，在其中有一個主要的 index.js 檔案（命名不限，通常是 main.js 或 index.js)，另外，有個 components 資料夾，裡面放著各種可以重複被利用的模組、函式 js 檔案。

src
|_index.js
|_components
  |_add.js
  |_minus.js
  |_ ...其他模組.js

完整的專案結構應該會長得像下方這張圖：

流程說明

接下來會依序修改幾個檔案：

index.html
index.js
add.js
webpack.config.js
package.json

index.html

在</body>前引入打包後的 js 檔案，路徑參考實際專案中的資料夾結構

1	<script type="text/javascript" src="./dist/index.bundle.js"></script>

index.js

寫入一些內容，其中 import 是 ES6 語法，透過 import 將其他 component 引入使用

1 2	import add from './components/add'; console.log(add(1, 2));

add.js

透過 export 導出函式內容

1
2
3

export default function(a, b) {
  return a + b;
}

webpack.config.js（Webpack 配置重點）

首先要有一個入口檔案，在第 2 行的 entry 屬性中，定義入口檔案的路徑
第 3 行是打包後的轉出文件，在 filename 中定義轉出後的檔案名稱
第 6 行，watch 屬性是定義是否實時自動偵聽，可以省去每次修改都重新手動打包的手續
第 7 行，是定義打包出來的內容是否要壓縮

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.bundle.js',
  },
  watch: true,
  optimization: {
    minimize: false,
  },
};

上述案例，執行 Webpack 打包，會自動新增一個 dist 資料夾，並將編譯後的檔案存於其中。

webpack.config.js-自定義轉出路徑

若想自定義轉出路徑，可以新增 path，改寫如下：

第 6 行的意思，
- __dirname:在當前的資料夾
- resolve:搜尋
- build:名稱為 build 的資料夾
第 7 行的意思，
- filename:打包後的檔案命名為’index.bundle.js’,

var path = require('path'); // <---- 引入path

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'), // <---- 自定義資料夾路徑
    filename: 'index.bundle.js',
  },
  watch: true,
  optimization: {
    minimize: false,
  },
};

webpack.config.js-打包多個入口檔案

第 4 行的入口，改為物件寫法，多個”key/value” pairs，
第 10 行，轉出檔案的命名以原檔案的命名[name]去做自動命名，方便辨識

var path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    index2: './src/index2.js',
  },
  output: {
    path: path.resolve(__dirname, 'build'), // <---- 自定義資料夾路徑
    filename: '[name].bundle.js',
  },
  watch: true,
  optimization: {
    minimize: false,
  },
};

package.json

在 script 屬性中新增 build 及 dev，並且定義指令訊息內容

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

執行指令

1	npm run build

或是

1	node_modules/.bin/webpack

Leah's Blog