webpack4、5+基礎入門

建立項目

• 建立檔案目錄
• 目錄結構如下

• webpack-demo

  |- package.json

  |- package-lock.json

  + |- /dist

  + |- index.html

  |- /src

  |- index.js

• 初始化package.json

npm init -y

• 本地安裝webpack 和 webpack-cli tips:預設安裝是 5.x版本，隻是在這個項目中安裝webpack5不會影響電腦全局使用的webpack.
• npm install -D webpack webpack-cli
• Tip
• 在安裝一個 package，而此 package 要打包到生産環境 bundle 中時，你應該使用 npm install --save。如果你在安裝一個用于開發環境的 package 時（例如，linter, 測試庫等），你應該使用 npm install --save-dev。更多資訊請檢視 npm 文檔。

總結下指令 ：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev           

使用webpack 打包

• 不配置檔案，npx webpack
• 使用一個配置檔案

不配置檔案 ，按照以上的建立項目流程的目錄結構可以直接使用 npx webapck 打包

可以這樣說，執行 npx webpack，會将我們的腳本 src/index.js 作為 入口起點，也會生成 dist/main.js 作為 輸出。Node 8.2/npm 5.2.0 以上版本提供的 npx 指令，可以運作在初次安裝的 webpack package 中的 webpack 二進制檔案（即 ./node_modules/.bin/webpack）：

npx webpackTip

輸出可能會稍有不同，但是隻要建構成功，那麼你就可以放心繼續。

在浏覽器中打開 dist 目錄下的 index.html，如果一切正常，你應該能看到以下文本：'Hello webpack'。

使用一個配置檔案,預設檔案名 webpack.config.js

webpack.config.js

const path = require('path');

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

現在，讓我們通過新的配置檔案再次執行建構：

npx webpack --config webpack.config.js           

Tip

如果 webpack.config.js 存在，則 webpack 指令将預設選擇使用它。我們在這裡使用 --config 選項隻是向你表明，可以傳遞任何名稱的配置檔案。這對于需要拆分成多個檔案的複雜配置是非常有用的。

npm scripts

考慮到用 CLI 這種方式來運作本地的 webpack 副本并不是特别友善，我們可以設定一個快捷方式。調整 package.json 檔案，添加一個 npm script：

{
  "name": "webpack5",
  "version": "1.0.0",
  "description": "",
  "private":true,
  "scripts": {
    "build": "webpack"
  },
  "author": "ff",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}
           

現在，可以使用 npm run build 指令，來替代我們之前使用的 npx 指令。

注意，使用 npm scripts，我們可以像使用 npx 那樣通過子產品名引用本地安裝的 npm packages。這是大多數基于 npm 的項目遵循的标準，因為它允許所有貢獻者使用同一組通用腳本。

npm run build 代替 npx webpack

Tip

可以通過在 npm run build 指令與參數之間添加兩個連接配接符的方式向 webpack 傳遞自定義參數，例如：npm run build -- --color。

總結

關鍵詞

• 本地安裝 webpack 和 webpack-cli
• npm install webpack webpack-cli –seve-dev
• 搭建預設最簡單目錄結構，零配置打包編譯
• npx webpack
• webpack 配置檔案名 webpack.confing.js