Webpack V4安裝使用與常用配置總結
webpack
Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析,然後將這些模組按照指定的規則生成對應的靜態資源。
Webpack
可以將多種靜態資源js、css、less
轉換成一個靜態檔案,減少了頁面的請求。
Webpack 的安裝
webpack
在打包過程中會使用node
內建的一些模組。
在安裝Webpack
前,你本地環境需要支援 node.js
。
npm
安裝命令:
// 全域性安裝
npm install -g webpack
// 安裝到你的專案目錄
npm install --save-dev webpack
// 或使用淘寶映象安裝
cnpm install -g webpack
webpack
官方不推薦使用全域性安裝,全域性安裝會鎖定到特定版本的WebPACK,並可能在使用不同版本的專案中失敗。
這裡僅僅用於試驗,使用cnpm
全域性安裝,安裝版本是v4.12.1
安裝完後執行發現提示如下:
webpack v4
或更高版本,則需要額外安裝CLI
。
webpack-cli
與webpack-command
的差別不大,前者具有webpack
所有功能,後者是輕量級的封裝好的CLI,這裡安裝webpack-cli
。
如果是全域性安裝的話,webpack-cli
也是需要全域性安裝的,命令如下:
// 全域性安裝
npm install -g webpack-cli
// 安裝到你的專案目錄
npm install --save-dev webpack-cli
結果如下:
輸入webpack -v
可以檢視webpack
版本。
Webpack 的使用
輸出webpack-cli -h
可以檢視可設定的引數與配置
Usage: webpack-cli [options]
webpack-cli [options] --entry <entry> --output <output>
webpack-cli [options] <entries...> --output <output >
webpack-cli <command> [options]
配置選項:
引數 | 說明 | 輸入型別 | 預設 |
---|---|---|---|
--config |
配置檔案的路徑 | String | webpack.config.js或webpackfile.js |
--config-register , -r |
在載入webpack配置之前預載入一個或多個模組 | Array | |
--config-name |
要使用的配置的名稱 | String | |
--env |
當它是一個函式時,環境傳遞給配置 | String | |
--mode |
使用模式,無論是“開發”還是“生產” | String |
輸出選項:
引數 | 說明 | 輸入型別 | 預設 |
---|---|---|---|
--output-chunk-filename |
輸出其他塊的檔名 | String | filename with [id] instead of [name] or [id] prefixed |
--output-filename |
輸出為打包檔案的檔名 | String | [name].js |
--output-jsonp-function |
用於塊載入的JSONP函式的名稱 | String | webpackJsonp |
--output-library |
將入口點的匯出顯示為庫 | String | |
--output-library-target |
用於將入口點的匯出作為庫公開的型別 | String | var |
--output-path |
輸出到編譯的目錄 | String | 當前目錄 |
--output-pathinfo |
包含對每個依賴項的請求的註釋 | Boolean | false |
--output-public-path |
輸出公共路徑 | String | / |
--output-source-map-filename |
輸出源對映的檔名 | String | [name].map or [outputFilename].map |
--build-delimiter |
輸出後顯示自定義文字 | String | Default string is null. You could provide a string such as === Build done === |
在不建立配置檔案的情況下,使用webpack-cli也可以進行簡單的打包
在測試資料夾webpack-demo
建立如下目錄:
webpack-demo
|- index.html
|- /src
|- index.js
|- greet.js
|- /dist
src
目錄下的index.js
檔案為webpack
編譯入口檔案,greet.js
為封裝的簡易模組。
// greet,js
module.exports = function() {
var greeter = document.createElement('div');
greeter.innerText = "Hello webpack!";
return greeter;
};
// index.js
const greeter = require('./greet.js');
document.querySelector("#app").appendChild(greeter());
index.html
檔案為網頁訪問的入口檔案。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack-demo-test</title>
</head>
<body>
<div id='app'>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
dist
目錄為webpack
編譯輸出檔案目錄。
在webpack-demo
目錄下執行
webpack-cli --entry ./src/index.js --output ./dist/bundle.js
結果如下:
編譯成功後dist目錄便會生成bundle.js
檔案,此時用瀏覽器開啟index.html可以看到在文件上寫入了Hello webpack!
。
通過配置檔案來使用Webpack
webpack
官網上指明:從版本4開始,webpack
不需要任何配置,但大多數專案都需要更復雜的設定,這就是webpack
支援配置檔案的原因。這比在終端中手動輸入許多命令更有效率。
在主目錄建立webpacl.config.js
檔案:
// webpack.config.js
const path = require('path'); // 使用node.js中的path模組
module.exports = {
mode: "development", // 設定模式為development,("production" | "development" | "none")
entry: './src/index.js', // 入口檔案
output: {
filename: 'bundle.js', // 打包輸出檔名
path: path.resolve(__dirname, 'dist') // 打包輸出目錄
}
};
然後在webpack-demo
目錄下執行
webpack-cli --config webpack.config.js
也可以成功編譯。
設定package.json快速使用webpack
// 使用npm init快速建立package.json檔案
npm init -y
更改package.json
檔案,隨著private:true
,以及刪除main
條目。這是為了防止意外發布程式碼。
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-cli --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
配置完成後只需要在命令列輸入npm start
,就可以按webpack.config.js
中設定的配置進行打包了。