共计 2573 个字符，预计需要花费 7 分钟才能阅读完成。
webpack 用于编译 JavaScript 模块。
根本装置
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev编写我的项目
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.jsindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 起步 </title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>src/index.js
function component() {const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component()); 调整 package.json 文件，避免意外公布代码。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {"test": "echo \"Error: no test specified\"&& exit 1"},
"keywords": [],
"author": "","license":"ISC","devDependencies": {"webpack":"^5.4.0","webpack-cli":"^4.2.0"}
}应用 webpack 来治理 JS 脚本
webpack-demo
|- package.json
+ |- webpack.config.js
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.jsnpm install --save lodashsrc/index.js
+import _ from 'lodash';
+
function component() {const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 起步 </title>
- <script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>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
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built]
./node_modules/lodash/lodash.js 530 KiB [built]
webpack 5.4.0 compiled successfully in 1934 ms如果
webpack.config.js存在，则webpack命令将默认抉择应用。
在浏览器中关上 dist 目录下的 index.html，如果一切正常，应该能看到以下文本：'Hello webpack'。
npm scripts
思考到用 CLI 这种形式来运行本地的 webpack 正本并不是特地不便，咱们能够设置一个快捷方式。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "","private": true,"scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1"
+ "test": "echo \"Error: no test specified\"&& exit 1",
+ "build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "","license":"ISC","devDependencies": {"webpack":"^5.4.0","webpack-cli":"^4.2.0"},"dependencies": {"lodash":"^4.17.20"}
}$ npm run build
# 通过 -- 传递参数
$ npm run build -- --color最终的目录构造：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- main.js
|- index.html
|- /src
|- index.js
|- /node_modules
Tip
正文完
