Webpack 的使用

Posted 小伍

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 来管理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 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\'。

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

以上是关于Webpack 的使用的主要内容，如果未能解决你的问题，请参考以下文章

如何使用webpack加载库源映射？

Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

无法创建中继容器； graphql.js 文件似乎有 webpack 工件？

浅析 -- webpack