Webpack初体验

Webpack初体验

---

前言

与gulp、rollup、vite等类似，webpack是一种用于现代js程序的前端静态文件打包工具，现在十分流行，被广泛应用（react、vue里都有它的身影），作为一个想深耕前端的攻城狮，了解webpack、学会使用并理解其原理是必不可少的。下面就一起跟笔者做一个简单了解吧。

---

一、Webpack是什么？

webpack是一个流行的前端工程化的工具，就像官网首页这幅图所描述的。在webpack里面，一切皆模块，一切皆字符串，它工作的时候，会分析各个模块的依赖关系，然后再通过一系列的loaders、plugins对模块处理，最终输出到指定的文件中（通常为disk）。相比其他的工具，它更注重于模块打包，更加开放。

---

二、Webpack四大核心

1.entry

入口起点，指示webpack应该使用那个模块，来作为构建器内部的依赖图的开始。entry的可以设置一个或者多个路径（单入口或者多入口）。
代码如下（示例）：

2.output

出口指定webpack打包的bundle放在哪里，以及如何命名这些文件。默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

代码如下（示例）：

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

3.loader

webpack只能识别JavaScript和JSON文件，这是它开箱自带的技能。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。例如：css-loader、sass-loader。

代码如下（示例）：

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};
//记住，在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。为了使你便于理解，如果没有按照正确方式去做，webpack 会给出警告。

4.plugins

     loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。plugins让loader更加强大。
    想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

代码如下（示例）：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle。

---

总结

以上就是笔者对webpack的初体验，webpack中一切皆模块。我们可以把webpack比作一个榨汁机，榨汁机的各种刀片就是plugins和loaders，将原材料（模块文件）进行一系列榨汁操作，最终输出一杯杯果汁（bundle）。
路漫漫其修远兮，webpack还有很多很多值得深入研究，本人也会不断去探索它，摸清这位流行的前端工程化“大师”的内心。