webpack 用于编译 JavaScript 模块。

根本装置

mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev

编写我的项目

  webpack-demo  |- package.json+ |- index.html+ |- /src+   |- index.js

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>  </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.js
npm install --save lodash

src/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 finishedasset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related assetruntime modules 1000 bytes 5 modulescacheable modules 530 KiB  ./src/index.js 257 bytes [built] [code generated]  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]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_modulesTip