Webpack 的使用

時間 2021-02-26

標籤 javascript html java node webpack web npm json 瀏覽器 bash 欄目 JavaScript 简体版

原文原文鏈接

webpack 用於編譯 JavaScript 模塊。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.htmlhtml

<!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.jsjava

function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

調整 package.json 文件，防止意外發布代碼。node

package.jsonwebpack

{
   "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.jsweb

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   return element;
 }

 document.body.appendChild(component());

dist/index.htmlnpm

<!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.jsjson

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] [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'。bash

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。