安裝
本地安裝
進(jìn)入項(xiàng)目文件夾，運(yùn)行 npm init -y，生成 package.json 文件
// package.json
{
"name": "webpackdemo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "4",
"webpack-cli": "3"
}
}
運(yùn)行以下兩種命令其一，生成 node_modules 文件
yarn add webpack@4 webpack-cli@3 --dev
npm install webpack@4 webpack-cli@3 --dev
進(jìn)入 webpack 文件所在目錄，通過(guò) .\node_modules\.bin\webpack --xxx 對(duì)其進(jìn)行操作
注意：當(dāng)前webpack只是本地安裝，安裝在當(dāng)前項(xiàng)目中，因此對(duì) webpack 進(jìn)行操作時(shí)，需要進(jìn)入webpack所在目錄方可操作
全局安裝
安裝最新或特定版本
npm install --global webpack
注意：不推薦全局安裝 webpack。這會(huì)將你項(xiàng)目中的 webpack 鎖定到指定版本，并且在使用不同的 webpack 版本的項(xiàng)目中，可能會(huì)導(dǎo)致構(gòu)建失敗。
最新版本安裝
npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>
注意：最新版本中可能仍包含bug，因此不適合用于生產(chǎn)環(huán)境
配置
webpack 轉(zhuǎn)譯 JS
執(zhí)行命令:
npx webpack
初始化 webpack.config.js
運(yùn)行 npx webpack 命令時(shí)，可能會(huì)碰到報(bào)錯(cuò)如下：
The 'mode' option has not been set, webpack will fallback to 'production' fThe 'mode' option has not been set, webpack will fallback to 'production' fThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaul
ts for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
原因是沒有指定mode導(dǎo)致，
解決方法：
創(chuàng)建 webpack.config.js 文件
// webpack.config.js
module.exports = {
// mode取值可為 development 或 production
// 開發(fā)模式為 development，發(fā)布模式為 production
mode: 'development',
};
webpack.config.js 中配置 entry 和 output
var path = require('path');
// webpack.config.js 中添加 entry 和output 配置
module.exports = {
// entry 為指定默認(rèn)入口文件
entry: './foo.js',
output: {
// 轉(zhuǎn)譯后輸出目錄，不寫則默認(rèn)為dist目錄
path: path.resolve(__dirname, 'dist'),
// 轉(zhuǎn)譯后輸出文件
filename: 'foo.bundle.js'
// 或者可以寫成，dist 中輸出文件名后會(huì)出現(xiàn)十六位 hash 數(shù)，利于 http 緩存更新
//
filename:'[name].[hash].js'
}
};
http 緩存：當(dāng)用戶訪問某網(wǎng)站后，網(wǎng)站在加載完 index.html 后，會(huì)將請(qǐng)求的 css、js 等資源緩存一段時(shí)間，在這段時(shí)間內(nèi)，用戶再次訪問此網(wǎng)站時(shí)，只需要下載index.html，頁(yè)面可從硬盤燈內(nèi)存中得到css、js第已緩存資源，以實(shí)現(xiàn)快速訪問。為文件添加十六位hash數(shù)，使得頁(yè)面資源更新時(shí)，可以生成新的對(duì)應(yīng)文件，與舊文件進(jìn)行區(qū)分，從而告知瀏覽器需要請(qǐng)新的資源，利于 http 緩存更新。
build 配置
由于每次更新會(huì)在 dist 中產(chǎn)生新的帶有十六位 hash 的文件，從而導(dǎo)致 dist 目錄越來(lái)越大，因此需要每次執(zhí)行前刪除 dist 目錄，在 package.json 文件中添加命令：
// 每次執(zhí)行 npx webpack 前，先刪除 dist 目錄
// npx webpack 可簡(jiǎn)寫為 webpack
"scripts": {
"build": "rm -rf dist && webpack"
// 使用 rm -rf 可能會(huì)報(bào)錯(cuò)，錯(cuò)誤提示為：
// 'rm' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件。
// 錯(cuò)誤原因可能：使用了Linux 下的 rm -rf 命令，而你的電腦是windows
// 可將命令修改成以下
"build": "rimraf && webpack"
},
修改后，打包執(zhí)行命令：
// 命令 1
yarn build;
// 命令 2
npm run build
webpack 插件自動(dòng)生成 html
安裝 html-webpack-plugin
webpack 5
npm install --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin
webpack 4
npm install --save-dev html-webpack-plugin@4
yarn add --dev html-webpack-plugin@4
在 webpack.config.js 中添加配置文件，會(huì)在 dist 中生成對(duì)應(yīng)文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: '[name].[hash].js'
},
// html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
// 指定生成頁(yè)面的title
title: '123',
// 生成頁(yè)面以model.html頁(yè)面為模板
template:'assets/model.html'
})
]
};
// model.html頁(yè)面內(nèi)容
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
//用于接收傳入的title
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
// 在 dist 中生成的 html 頁(yè)面，會(huì)自動(dòng)添加 script
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>123</title>
</head>
<body>
<script src="main.1ad4c1222cd4658c9413.js"></script></body>
</html>
webpack 解析 css 文件
安裝插件，如果安裝的是webpack 4+，建議 style-loader 安裝2.0以下版本，css-loader 安裝5.0以下版本。
查詢適配版本的方式參考：https://blog.csdn.net/u013594477/article/details/120890184
// 方法1：
yarn add css-loader@version --dev
yarn add style-loader@version --dev
// 方法2：
npm i css-loader@version --dev
npm i style-loader@version --dev
webpack.config.js 配置，添加以下代碼：
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
webpack-dev-derver 使用
安裝 webpack-dev-derver 插件
yarn add webpack-dev-server --dev
npm i webpack-dev-server --dev
webpack.config.js 配置
module.exports = {
devtool: "inline-source-map",
devServer:{
// webpack 4+
contentBase:'./dist'
// webpack 5+
static:'./dist'，
// 開啟端口號(hào)，默認(rèn)8080
port：8080
},
};
package.json配置
"scripts": {
// --open 為是否運(yùn)行后自動(dòng)打開瀏覽器，不需要可以刪除
"start":"webpack-dev-server --open",
},
運(yùn)行命令，之后在對(duì)應(yīng)端口打開頁(yè)面
yarn strat
npm run start
注意：此命令不會(huì)自動(dòng)生成 dist 目錄，不依賴于 dist 目錄
插件導(dǎo)出 css 文件
安裝，webpack 4+ 建議安裝1.6及以下版本
yarn add mini-css-extract-plugin --dev
npm install mini-css-extract-plugin --dev
webpack.config.js 配置，導(dǎo)出文件默認(rèn)存儲(chǔ)在 dist 目錄，且自動(dòng)鏈入 dist/index.html
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// name可以自行指定，指定格式為 index.css，不指定則默認(rèn)為main
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
ignoreOrder:false,
}),
],
module: {
rules: [
// css 導(dǎo)出
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
