Vue.js 学习笔记十一：Webpack之webpack 基本使用

最新推荐文章于 2023-02-21 16:25:12 发布

stary1993

最新推荐文章于 2023-02-21 16:25:12 发布

阅读量162

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： vue js webpack

本文链接：https://blog.csdn.net/qq_27875933/article/details/116694407

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

webpack 基本使用

运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。Window 版本只能通过卸载重装进行升级。

首先我们创建一个目录，初始化 npm，然后在本地安装，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli -D

现在，我们将创建以下目录结构、文件和内容：

  webpack-demo
  |- package.json
+ |- index.html
+ |- /dist // 用于存放之后打包的文件
+ |- /src // 用于存放我们写的源文件
+   |- math.js
+   |- index.js

src/index.js

import * as math from "./math";

document.write(math.add(10, 20))
document.write('<br/>')
document.write(math.mul(10, 20))

src/math.js

function add(num1, num2) {
    return num1 + num2
  }
  function mul(num1, num2) {
    return num1 * num2
  }
  
export {
      add,
      mul
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>基本使用</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

运行以下命令打包：

.\node_modules\.bin\webpack --mode=development

asset main.js 4.33 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 280 bytes
  ./src/index.js 126 bytes [built] [code generated]
  ./src/math.js 154 bytes [built] [code generated]
webpack 5.33.2 compiled successfully in 96 ms

之后可以在 dist 目录下看到 main.js 文件，这时 index.html引入的 script 要改成打包后的文件：

 <script src="./dist/main.js"></script>

但是，每次执行都敲这么一长串有觉得不方便，那么我们可以在 package.json 的 scripts 中定义自己的执行脚本：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0"
  }
}

package.json 中的 scripts 的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的 node_modules/.bin 路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。

接下来执行以下命令执行打包：