什么是webpack

这一篇文章主要简单介绍了 webpack 是什么以及 webpack 的一些简单配置，你只要跟着我敲完这些代码后一定会对 webpack 有一个基本的了解的。😎

webpack 是一个模块打包器

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

上面引用了 webpack 官网的一段介绍，我们可以简单的理解 webpack 是一个模块打包器，那什么是模块打包器呢？😂 先看一个简单的例子

index.html
index.js
ComponentA
ComponentB

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

// ES Moudule 模块化引入
import ComponentB from './componentB';

var root = document.getElementById('root');

// CommonJs 模块引入
var ComponentA = require('./componentA');

new ComponentA();
new ComponentB();

function ComponentA() {
  var componentA = document.createElement('div');
  componentA.innerHTML = 'ComponentA';
  root.append(componentA);
}

module.exports = ComponentA;

function ComponentB() {
  var componentB = document.createElement('div');
  componentB.innerHTML = 'ComponentB';
  root.append(componentB);
}

export default ComponentB;

这里的模块可以理解成componentA和componentB，这种写法在vue和react中非常常见，写完这些文件后打开index.html文件，浏览器是会报错的。

打开 index.html

Uncaught SyntaxError: Cannot use import statement outside a module

这是由于这里使用了 es6 中的模板引入的方式，浏览器是识别不了这种方式的，那怎么办呢？😥

这个时候 webpack 就派上用场了，首先初始化该项目

npm init -y

初始化后会生成package.json文件

安装 webpack-cli 和 webpack（不建议全局安装）

npm install webpack-cli -D
npm install webpack -S

安装固定版本的 webpack

npm install webpack@版本号
npm info webpack  // 查看包信息

打包 index.js

npx webpack index.js

这里如果不使用 npx 的话 node 会默认在全局环境中找寻 webpack，加上 npx 的话就会使用项目中安装的 webpack 来执行命令

打包后可以看到根目录下多了一个 dist 文件夹（webpack 默认设置好的，后面会讲如何改变），里面有一个 main.js 文件，这个文件就是经过 webpack 处理后的 index.js。

然后我们修改一下 index.html 的代码中引入 index.js 的地方

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

这下浏览器就能正常识别 html 中的 js 文件了，到这里为止理解 webpack 是一个模块打包器应该不是很难了吧。 webpack 将模块 componentA 和 componentB 打包生成了最后的 main.js。

webpack 配置文件

webpack 的配置文件名默认是webpack.config.js，当然我们也可以指定配置文件。

开始之前我们先修改一下项目目录

webpacktest
 ├── index.html
 ├── package-lock.json
 ├── package.json
 ├── src
 │   ├── componentA.js
 │   ├── componentB.js
 │   └── index.js
 └── webpack.config.js

在项目根目录下新建配置文件 webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development', // 默认为production
  entry: {
    main: './src/index.js' // 打包入口文件
  },
  output: {
    // 输出文件配置
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

上面引用的 path 是 node 中的一个模块，__dirname表示 webpack.config.js 所在的目录。

entry 可以简写为 entry: './src/index.js'

info

mode 中的 development 和 production 有什么区别呢

我们看一下打包出来的文件 bundle.js 就知道了，production 模式下的代码是一整行的，体积更小。而 development 模式下的代码不是一整行的有利于调试。

tip

node path 的更多信息

执行下面命令后即可完成打包，效果和上一节一样

npx webpack

当然也可以使用自定义配置文件

npx webpack --config 自定义配置文件

写过项目的小伙伴应该都发现平时都是使用 npm run xxx 来打包项目的，下面就来介绍一下如何配置

修改 package.json 文件中的 script

"scripts": {
  "build": "webpack"
},

这样就可以通过npm run build来进行打包了，不过看过第一节的小伙伴肯定有疑问了，这样配置会不会使用全局的 webpack 去进行打包呢 🙄，其实并不会，这里npm script命令会在项目的node_modules文件中去寻找 webpack 并执行。

打包好后我们打开 index.html 看看，发现是会报错的，这里注意：我们要手动把 index.html 移动到 dist 目录下并修改一下 js 路径，因为 webpack 并没有将 index.html 打包到 dist 目录下。

<script src="./bundle.js"></script>

这下再运行 index.html 就没有任何问题了。🎉

webpack 是一个模块打包器​

webpack 配置文件​

webpack 是一个模块打包器

webpack 配置文件