安裝步驟
啥都不懂一切都按照官方教程來
webpack版本：4.23.1
webpack-cli版本：3.1.2
- 創(chuàng)建一個(gè)目錄幢哨，并且進(jìn)行初始化npm
mkdir webpack-demo && cd webpack-demo
npm init -y
- 接著在本地安裝 webpack海洼，安裝webpack-cli
npm install --save-dev webpack
npm install --save-dev webpack-cli
// 一行代碼
npm install webpack webpack-cli --save-dev
- 修改配置
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
- 創(chuàng)建以下目錄結(jié)構(gòu)和內(nèi)容
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
|- /src
|- index.js
index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<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">
<title>webpack-demo</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通過一個(gè) script 腳本引入）對于執(zhí)行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
src:"源"代碼，用于書寫和編輯的代碼
dist:"分發(fā)"代碼,構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄牡借，最終將在瀏覽器中加載
- 加載模塊(Lodash)
要在 index.js 中打包 lodash 依賴，我們需要在本地安裝 library：
npm install --save lodash
//現(xiàn)在，在我們的腳本中 import lodash：
import _ from 'lodash';
- 使用一個(gè)配置文件
添加文件`webpack.config.js'
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
配置詳見
PS: 不懂配置哇
- NPM 腳本
cli不方便尘奏，寫個(gè)快捷方式
packge.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
現(xiàn)在牙甫，可以使用 npm run build 命令掷酗，來替代我們之前使用的 npx webpack 命令。注意窟哺，使用 npm 的 scripts泻轰，我們可以像使用 npx 那樣通過模塊名引用本地安裝的 npm 包。這是大多數(shù)基于 npm 的項(xiàng)目遵循的標(biāo)準(zhǔn)且轨，因?yàn)樗试S所有貢獻(xiàn)者使用同一組通用腳本（如果必要浮声，每個(gè) flag 都帶有 --config 標(biāo)志）。
到此為止一個(gè)基本構(gòu)建就結(jié)束了
接下來是管理資源
