关于node.js:Webpack-的使用

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.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-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 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'。

思考到用 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

关于node.js:Webpack-的使用

根本装置

编写我的项目

应用 webpack 来治理 JS 脚本

npm scripts