01-webpack5理解及配置-白红宇

01-webpack5理解及配置

阅读量：671 次

发布时间：2019-03-17

本文共 2080 字，大约阅读时间需要 6 分钟。

#/master minimized

了解Webpack5

webpack是一种前端资源构建工具，主要用于打包 JavaScript 模块。它可以处理所有前端资源文件（如 JS、JSON、CSS、IMG、LESS 等），将它们作为模块进行处理，并根据模块的依赖关系进行静态分析，生成对应的静态资源（bundle）。

树结构

在一个入口文件中引入所有资源，形成所有依赖关系的树状图。这样，webpack可以知道每个模块之间的依赖关系，从而正确地将它们合并到一起。

模块

在 webpack 中，模块可以是 ES6 模块、commonJS 模块或者 AMD 模块。无论哪种模块类型，webpack 都可以将它们统一处理成一个可执行的资源文件。

Chunk

在打包过程中，webpack 会处理每一个模块文件，这些处理的模块文件被称为 chunk。例如，异步加载一个模块就会产生一个独立的 chunk。

Bundle

bundle 是最后打包后的文件。通常，chunk 会被合并到一个或多个 bundle 中。不过，有时候多个 chunk 也可能被组合到同一个 bundle 中，具体取决于打包器的优化策略。

优化策略

为了优化最后生成的 bundle 的数量，可能不等于 chunk 的数量，因为多个 chunk 可能会被组合到一个单独的 bundle 中。这种优化能够减少最终的资源数量，从而提升性能。

Webpack配置

初始化项目

初始化 package.json 文件：

npm init -y

这将会生成一个默认的 package.json 文件。然后安装 webpack 和 webpack-cli：

npm install webpack webpack-cli --save-dev

注意：不推荐全局安装 webpack全局工具。

创建配置

创建 src 文件夹，并添加一些 JS 文件：

src/index.js

const { sum } = require("./two");console.log(sum);

src/one.js

const name = "100";console.log(name);function add(x, y) {  return x + y;}function demo(string) {  return string;}module.exports = { name, add, demo };

src/two.js

const { name, add } = require("./one");let b = 20;const sum = add(name, b);module.exports = { sum };

使用 Development 模式：
```
webpack --mode development
```
这将会生成适合开发环境的构建文件。同样地，可以使用 Production 模式：
```
webpack --mode production
```
Production 模式会对代码进行压缩，提升性能。

配置 webpack.config.js：

const { resolve } = require("path");module.exports = {  entry: "./src/index.js",  output: {    path: resolve(__dirname, "./build"),    filename: "build.js"  },  mode: "development",  module: {    rules: [      {        test: /\.css$/,        use: ["style-loader", "css-loader"]      }    ]  }};

这个配置文件指定了入口文件和输出路径，并定义了 CSS 模块的处理规则。

运行构建：
```
webpack
```
这将根据 webpack.config.js 配置生成构建文件。默认的输出路径和文件名是通过配置文件指定的。

常见问题解决

在配置和执行过程中可能会遇到以下问题：

1. 无法使用 webpack 命令

这通常是因为 webpack 全局安装在项目根目录下，而 .bin 文件夹的位置可能需要修改。可以通过修改 .cmd 文件内的路径，解决此类问题。

2. 模块未正确加载

确保项目的路径配置正确，特别是 entry 和 output 的路径配置。使用 __dirname 合理地指定路径，可以避免一些常见错误。

3.CSS 模块处理

确保 CSS 模块的前置处理（loader）正确启用。使用 style-loader 和 css-loader 的组合是处理 CSS 的正确方法。

通过以上步骤，您应该能够成功配置并运行 webpack 构建工具。在实际使用中，建议根据项目需求进行更详细的配置，同时熟悉更多的插件和配置选项，以提升构建效率和优化后输出文件的性能。

转载地址：http://ntuhz.baihongyu.com/

你可能感兴趣的文章