webpack打包基础配置解析

1. 最简webpack打包结构

通过npm init创建一个最基础的npm项目之后。我们的目录结构变成了如下。

---
|--package.json
---

我们此时执行npx webpack会提示，找不到src,src.js,src.json等等，这就说明webpack在最基础的情况下是会寻找src文件夹来作为目标的。那么通常我们会在目录下创建src文件夹来作为资源文件夹，src下面的index.js来作为入口程序。所以我们创建一个src文件夹，在其中创建一个index.js。

---
|--src
    |--- index.js
|--package.json
---

其中index中我们写入一段webpack文档中提供的案例代码，其中依赖了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());

此时我们执行npx webpack，来执行webpack程序。发现webpack为我们创建了一个dist文件夹，其中有一个主要的js文件——main.js，这也就是webpack为我们根据index.js中的依赖关系等生成的一个打包后的文件。

那么我们可以在dist文件夹中创建一个index.html，通过一个script来引入main.js，然后打开这个网页，发现页面上面出现了Hello webpack，这也就说明我们打包成功了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

2. 引入webpack配置文件

上面的一些dist文件等都是webpack自动为我们生成的，我们可以通过一个配置文件来去进行配置。如果存在webpack.config.js在根目录下的话，那么webpack会根据这个配置文件来进行打包。

其中entry就是程序打包的入口主文件，webpack会根据这个文件找到所有依赖的文件等，最终根据配置来打包成不同的打包文件。

output就是最终我们要打包的文件的配置。在比较复杂的场景下，我们可以打包成多个文件，不止一个main.js。那么它的基本配置就是filename,指定打包文件的名字，path就是指定打包存放的文件位置，这里指定的当前配置文件所在目录下的dist文件夹，如果不存在会创建这个文件夹。

const path = require("path");

module.exports = {
  entry: "/src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

现在，为了更加的方便，我们在package.json中的scripts中添加build，来快速的执行webpack的打包。

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
+  "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

3. 说明

到目前为止，我们只是实现了将指定的一个入口文件打包成一个指定目录下的输出文件，我们剩下的就是手动创建一个index.html然后在其中引入我们打包的文件。显然我们之前说过，我们可以打包成许多个output文件，那么当项目庞大，打包输出文件特别多的时候，我们手动来引入到html文件中显然不太好，对于webpack，在后面会说明如何实现一套流程自动的去完成。

4. 优化

我们在上面的配置中执行npm run build之后，webpack会提示如下提示

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.

这是我们webpack没有指定环境的打包所提示的内容，它帮我们在mode缺省的时候配置了production生产模式的代码打包。在目前的情况下来看，production和development的配置区别如下。

production

asset main.js 69.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
cacheable modules 532 KiB
  ./src/index.js 228 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.80.0 compiled successfully in 1167 ms

development

asset main.js 554 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
cacheable modules 532 KiB
  ./src/index.js 228 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.80.0 compiled successfully in 183 ms

在目前看来，它帮我们把运行时的内容进行了压缩，实际上开发模式和生产模式的差别很大，在开发模式中它会打包一些内容来让我们的开发环境拥有实时加载等等重要的功能，这在后面能够了解到。那么我们现在没有用到生产环境，我们将mode设置为development

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "",
  "private": "true",
  "scripts": {
-    "build": "webpack"
+    "build": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

1. 最简webpack打包结构​

2. 引入webpack配置文件​

3. 说明​

4. 优化​

production​

development​