深入浅出，Webpack

Webpack 是一个现代化的 JavaScript 模块打包工具，它可以帮助我们将各种类型的文件转化为可在浏览器中运行的代码。它可以理解各种文件之间的依赖关系，并生成最终的 Javascript、CSS 和图片等静态资源。

本文将基于最新的 Webpack 5 版本进行深入浅出地介绍 Webpack 的使用方法、特性及应用场景，并提供多个实例和案例阐述。让您更好地理解和掌握这个强大的工具。

## Webpack 入门

### 安装Webpack

安装Webpack可以使用 npm 包管理器，通过以下命令进行安装：

```shell

npm install webpack --save-dev

```

> 注：Webpack5 要求 Node.js 版本为 v10.13.0 或更高版本，同时支持 npm 版本 v6 或更高版本。

如果你使用的是全局安装的 Webpack，那么可以直接在命令行中使用 webpack 命令。

### 创建一个 Webpack 配置文件

在开始使用 Webpack 之前，我们需要创建一个配置文件，来告诉 Webpack 如何打包我们的代码。我们可以通过创建”webpack.config.js”文件来完成配置。如下代码：

```javascript

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

```

在配置文件中，我们先导入了 path 模块，然后定义了一个用于导出的对象。该对象有两个属性：entry 和 output。entry 属性定义了 Webpack 打包的入口文件，即首先编译的文件。output 属性则指定了打包的输出文件名和路径。

这样，我们就配置好了我们的第一个 Webpack 配置文件。

### 使用 Webpack

执行以下命令，打包我们的代码：

```shell

webpack --config webpack.config.js

```

在执行完成后，Webpack 就会根据我们的配置文件，进行打包并输出到指定路径。

### 引入 Loader

在 Webpack 中，我们可以通过使用 Loader 来处理各种类型的文件。Loader 可以理解为 Webpack 的 preprocessor。例如，我们可以使用 css-loader 来处理 CSS 文件，使用 file-loader 来处理图片文件。

```javascript

module: {

rules: [

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

{

test: /\.(png|jpe?g|gif)$/i,

loader: 'file-loader',

options: {

name: '[name].[ext]',

outputPath: 'images/',

},

},

],

},

```

在上面的代码中，我们声明了两个 Loader：css-loader 和 file-loader。

* css-loader：读取 CSS 文件，并将其转化为 JS 可以读取的 CommonJS 模块。

* style-loader：将处理完成的 CSS 模块，插入到 HTML 的 header 中。

* file-loader：用于处理图片和字体资源，会将图片拷贝到 dist/images 目录下，并返回图片的 URL。

### 引入 Plugin

Webpack 插件通常用于完成一系列特定的任务。例如，我们可以使用 HtmlWebpackPlugin 来生成 HTML 文件，或者使用 UglifyJSWebpackPlugin 来压缩代码。

```javascript

const HtmlWebpackPlugin = require('html-webpack-plugin');

const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

plugins: [

new HtmlWebpackPlugin({

title: 'Webpack Demo',

filename: 'index.html',

template: './src/template.html',

}),

new UglifyJSWebpackPlugin(),

],

};

```

在上面的代码中，我们声明了两个插件：

* HtmlWebpackPlugin：用于生成 HTML 文件，包括自动引入打包后的 JS 和 CSS 文件。

* UglifyJSWebpackPlugin：用于压缩 JS 代码。

### Webpack Dev Server

Webpack Dev Server 是一个小型的服务器，它可以用于开发和调试。它的主要优势在于支持实时重载（Live Reloading），当我们修改代码时，它可以在代码变化后自动重新编译和刷新浏览器。

Webpack Dev Server 能够将打包后的代码，保存在内存中，而不是写入硬盘中。这样可以大幅度提高编译速度。

我们可以通过以下命令启动 Webpack Dev Server：

```shell

npm install webpack-dev-server --dev

```

然后在配置文件中增加以下代码：

```javascript

devServer: {

contentBase: path.join(__dirname, 'dist'),

compress: true,

port: 9000,

},

```

在上述代码中，contentBase 属性设定了开发服务器的根目录，而 compress 属性则为压缩开发过程中的代码。port 属性则设定了服务器的访问端口号。

## Webpack 插件

Webpack 插件是与特定任务相关的工具集，它们可以用于完成许多重要的工作，例如代码优化、资源管理和环境变量注入等等。

下面列出了一些常用的 Webpack 插件：

### PurifyCSS-webpack

该插件可用于移除未使用的 CSS。

安装方法：

```shell

npm install --save-dev purifycss-webpack purify-css

```

使用方法：

```javascript

const PurifyCSSPlugin = require('purifycss-webpack');

module.export = {

plugins: [new PurifyCSSPlugin({

paths: glob.sync(path.join(__dirname, './*.html')),

})],

};

```

上述代码中，我们使用了 glob 模块，并将所有的 HTML 文件作为传给插件的 paths 属性，从而清除未使用的 CSS。

### CSS Tree Shaking

CSS Tree Shaking 插件可以用于删除未使用的 CSS，它们的作用类似于 PurifyCSS 插件。

安装方法：

```shell

npm install webpack --save-dev

npm install optimize-css-assets-webpack-plugin --save-dev

npm install cssnano --save-dev

```

使用方法：

```javascript

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.export = {

optimization: {

minimizer: [

new OptimizeCSSAssetsPlugin({

cssProcessorPluginOptions: {

preset: [

'default',

{

discardComments: {

removeAll: true,

},

},

],

},

}),

],

},

};

```

该插件用于删除未使用的 CSS。

### HtmlWebpackPlugin

该插件可用于生成 HTML 文件，并自动引入资源。

安装方法：

```shell

npm i html-webpack-plugin --save-dev

```

使用方法：

```javascript

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.export = {

plugins: [

new HtmlWebpackPlugin({

title: "Webpack Demo",

})

]

}

```

### CopyWebpackPlugin

CopyWebpackPlugin 插件可用于在打包过程中拷贝静态文件。

安装方法：

```shell

npm install copy-webpack-plugin --save-dev

```

使用方法：

```javascript

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

// ...

plugins: [

new CopyWebpackPlugin({

patterns: [

{ from: 'path/to/folder', to: 'path/to/folder' }

],

}),

],

};

```

## Webpack 常用 Loader

### babel-loader

Webpack中 Babel Loader 用于将 ES6/7/8 代码转化为 ES5 代码。

安装方法：

```shell

npm i babel-loader @babel/core @babel/preset-env webpack --save-dev

```

使用方法：

```javascript

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}

}

```

### file-loader

File-loader 可用于处理文件，例如字体和图片资源。

安装方法：

```shell

npm install file-loader --save-dev

```

使用方法：

```javascript

{

test: /\.(png|svg|jpe?g|gif)$/i,

use: [

{

loader: 'file-loader',

options: {

name: '[name].[ext]',

outputPath: 'images/',

},

},

],

},

```

### url-loader

url-loader 是一个基于 file-loader 的封装，它可以将图片转化为 base64 编码，以减少 HTTP 请求的次数。

安装方法：

```shell

npm install url-loader --save-dev

```

使用方法：

```javascript

{

test: /\.(png|jpe?g|gif)$/i,

use: [

{

loader: 'url-loader',

options: {

limit: 8192,

},

},

],

},

```

在上述代码中，我们设置 limit 属性为 8192 字节，超出限制的图片文件会从 file-loader 中处理。

### style-loader

Style-loader 可用于加载 CSS 并将其插入到 HTML 加载的页面中。

安装方法：

```shell

npm install style-loader --save-dev

```

使用方法：

```

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

```

### css-loader

Css-loader 可以处理 CSS 模块，并将其转化为 JSON 格式的文件。

安装方法：

```shell

npm install css-loader --save-dev

```

使用方法：

```javascript

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

```

### less-loader

Less-loader 可用于将 Less 编译为 CSS。

安装方法：

```shell

npm install less less-loader -D

```

使用方法：

```javascript

{

test: /\.less$/,

use: [

'style-loader',

'css-loader',

'less-loader'

]

}

```

### sass-loader

Sass-loader 可用于将 Sass 编译为 CSS。

安装方法：

```shell

npm install sass-loader node-sass -D

```

使用方法：

```javascript

{

test: /\.(scss|sass)$/,

use: [

'style-loader',

'css-loader',

'sass-loader'

]

}

```

## Webpack 优化

Webpack 作为一个模块打包工具，根据我们的配置，它会将我们所写的代码打包成静态资源。但是，如果我们的代码规模太大，打包可能会消耗太多时间和资源，这也是 Webpack 优化的一个重要议题。

下面我们针对 Webpack 进行优化的几个方向：

### 缩小编译范围

Webpack 5默认开启了 Module Federation 功能，使得多个服务无需依赖相同的依赖，极大地缩小了依赖的范围。除此之外我们还可以：

#### 1.使用 Tree Shaking

Tree Shaking 可以在代码编译过程中，检测出我们代码中没有被使用到的模块，如此一来便可以大大减少编译的体积。

#### 2.使用 externals

将不需要打包的模块放在 externals 中，告诉 Webpack 不用将这个模块打进包里面去。

### CDN 加速

可以使用 CDN 来引用常用的 JavaScript 库或框架，使它们不再出现在打包后的代码中。

### 预编译资源

我们可以从编译中排除某些体积宏大的包，并将这些包作为单独的模块来处理。

### 多线程编译

可以使用 HappyPack 插件来将 Webpack 的任务分解给多个线程并行处理，以缩短编译时间。

```javascript

const HappyPack = require('happypack');

module.exports = {

plugins: [

new HappyPack({

id: 'babel',

loaders: ['babel-loader?cacheDirectory'],

threads: 4,

}),

],

};

```

## Webpack Devtools

与 Chrome DevTools 类似，Webpack Devtools 允许我们在打包过程中进行调试。通过在 webpack.config.js 文件中添加 devtools 选项来启用这个功能。下面介绍一些常用的 devtools 选项：

### eval

eval 是最快的模式，因为它使用了 eval 打包方式。eval 打包后的代码字符串会被直接注入到 eval 函数进行执行，它可以使用最新的语言特性，但是不支持调试和接收 devtools 控制台的错误信息。

```javascript

devtool: 'eval',

```

### source-map

用来将编译后的代码映射回原始源代码，通常在开发环境中使用。

```javascript

devtool: 'source-map',

```

### inline-source-map

和 source-map 类似，但不会生成单独的 .map 文件，而是将 .map 文件直接写在打包后的文件中。

```javascript

devtool: 'inline-source-map',

```

### eval-source-map

类似于 eval，但同时还生成 .map 文件。

```javascript

devtool: 'eval-source-map',

```

## Webpack 实战

下面介绍两个 Webpack 实战案例：

### 案例1：开发一个 React 组件库

在该案例中，我们演示了如何使用 Webpack 构建一个 React 组件库。

1. 初始化项目

我们可以从 create-react-app 开始，初始化一个空白项目。

```shell

npx create-react-app my-app

cd my-app

```

2. 提取组件

我们可以从我们原有的项目中提取出需要的组件，并将其保存到单独的目录下。

3. 引入 CSS 和 LESS

使用 Webpack 去处理 CSS 文件，我们可以在其中按照模块化的方式引入 CSS 样式表。

4. 构建

使用 npm scripts 来构建我们的组件：

```json

"scripts": {

"build": "rimraf dist && webpack --config webpack.config.prod.js",

"start": "webpack-dev-server --hot --open --config webpack.config.dev.js",

"test": "react-scripts test",

"eject": "react-scripts eject"

}

```

### 案例2：在项目中使用 Webpack

在该案例中，我们演示了如何在一个已有的项目中使用 Webpack。

1. 添加 Webpack 到项目中

我们首先需要使用 npm 安装 Webpack 和相关 Loader 和插件。

2. 创建 Webpack 配置文件

我们可以根据项目的需求来创建一个合适的 Webpack 配置文件。

```javascript

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

devServer: {

contentBase: './dist',

},

plugins: [

new HtmlWebpackPlugin({

title: 'Production',

}),

],

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader'],

},

{

test: /\.(png|svg|jpg|jpeg|gif)$/i,

type: 'asset/resource',

},

{

test: /\.(woff|woff2|eot|ttf|otf)$/i,

type: 'asset/resource',

},

],

},

};

```

3. 添加 Webpack Build 命令

我们在 package.json 中添加一条 build 命令，用于将我们的代码进行打包。

```json

"scripts": {

"dev": "webpack-dev-server --mode development --open --hot",

"build": "webpack --mode production"

}

```

4. 测试

依使用测试我们的配置，运行以下命令：

```shell

npm run build

```

然后可以查看 dist 目录下的生成的代码。

## 结论

Webpack 是一个强大的前端构建工具，它能够统合各种资源的打包及优化，可以让前端开发者高效地进行代码的开发和维护。

通过本文的介绍，我们可以深入了解到 Webpack 的特性、使用方法及优化技巧，希望这些内容能够帮助您更好地使用 Webpack，提高工作效率。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/