webpack-基礎配置

前言

僅適用於webpack4.+！

webpack的文件其實已經很詳細了，也在網上找了一些教程，總結下來還是官方文件更加靠譜。可能是每個人的理解與表達的偏差。為了把流程按照自己能夠接受的方式梳理一遍，決定文字記錄一下。

開始

基本安裝

進入指定目錄，建立專案資料夾

cd code
mkdir webpack-demo
複製程式碼

進入專案資料夾，初始化npm

cd webpack-demo
npm init
//執行之後，一直回車至確認yes之後
//或者是直接執行以下程式碼跳過詢問
npm init -y
複製程式碼

安裝webpack

npm install webpack webpack-cli --save-dev
//區域性安裝
複製程式碼

目錄結構

src資料夾用來存放原始碼（用來編輯的程式碼）dist資料夾用來存放分發程式碼（優化處理後用來發布的程式碼）
```
  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js
複製程式碼
```

調整package.json檔案移除main入口，確保安裝包是私有的

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
複製程式碼

建立一個 bundle 檔案

以jquery為例

要在 index.js 中打包jquery 依賴，我們需要在本地安裝 library
```
npm install --save jquery
複製程式碼
```
注意：--save-dev 是你開發時候依賴的東西，--save 是你釋出之後還依賴的東西
在src/index.js中通過 import 引入 jquery
```
import $ from 'jquery'
複製程式碼
```
生成bundle檔案
- 直接生成，通過執行以下命令直接生成main.js檔案至dist資料夾內
```
npx webpack
複製程式碼
```
- 指定出口入口
```
npx webpack src/index.js --output dist/main.js
複製程式碼
```

注意：npx可以執行在初始安裝的 webpack 包(package)的 webpack 二進位制檔案（./node_modules/.bin/webpack）

使用配置檔案並優化執行命令

雖然webpack4可以自動幫我們處理，但是我們絕大多數時候還是想要擁有對程式碼更強的掌控能力，所以我們還是需要去學習如何配置webpack（雖然webpack的配置真的很操蛋）

新建配置檔案webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
複製程式碼

在package.json裡新增scripts

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
複製程式碼

現在，通過npm run build就可以執行了！

webpack-基礎配置

前言

開始

基本安裝

建立一個 bundle 檔案

使用配置檔案並優化執行命令

相關文章