Webpack的简单使用

1. Webpack 的简单介绍

Webpack 是一个模块化的打包工具，它可以将我们的模块化代码都打包到一个 js 文件中。而对于我们在不同环境中有兼容性问题的代码，我们就可以通过模块加载器（loader）去解决。而且 Webpack 具备代码拆分的能力（Code Splitting），它可以将应用中的代码根据我们的要求去打包，我们可以将应用初次加载的代码打包到一起，其他模块的代码打包到一起，实现渐进式加载。这样我们就可以避免将所有代码都打包到一起，而引起打包文件过大，导致页面加载速度过慢的问题。Webpack 还支持将其他类型的文件打包到 js 文件中。Webpack 是目前最主流的打包工具，它的功能非常强大，覆盖了绝大部分的现代 web 应用开发过程，下面我们来看看如何使用它来构建我们自己的项目。

2. Webpack 的基本使用

安装

我们想在项目使用 Webpack，首先我们需要在项目中安装它，我们要初始化一个 package.json，然后将 webpack 和 webpack-cli 作为我们的开发依赖引入

yarn init -y // 或者 npm init -y

yarn add webpack webpack-cli --dev

你可以使用 npm 去下载依赖，下面我都使用 yarn 去安装依赖，如果你想了解 yarn，可以去yarn 官网看一下。
安装之后，我们可以使用下面的命令查看 Webpack 的版本

yarn webpack --version

如果能够正常输出版本，那就证明我们安装成功了。
接下来我们就可以使用 webpack 去打包我们的文件。webpack 默认会从 src 下面的 index.js 开始打包，将所有的 js 文件导打包，之后我们所有的 js 文件就会被打包到 dist 目录下的 main.js 文件中。

Webpack 基本配置文件

Webpack4 之后的版本支持零配置的方式打包，Webpack 默认约定将 “src/index.js” 作为默认入口文件打包到 “dist/mian.js” 中，这种零配置的方式虽然好，但是有时候我们想自定义这个入口文件和输出文件。Webpack 中提供了一种方式，我们可以在项目的根目录下创建一个 webpack.config.js 的文件，这个文件是一个运行在 node.js 中的文件，我们需要按照 commonjs 的规范去编写我们的代码。例如我们想将 src 目录下的 main.js 作为入口文件，将 dist 目录作为输出目录，将 bundle.js 作为输出文件，我们可以做如下配置

const path = require('path')
module.exports = {
   
    entry: './src/main.js', // 入口文件
    output: {
   
        filename: 'bundle.js', // 输出文件
        path: path.join(__dirname, 'dist') // 输出目录
    }
}

接下来我们运行打包命令，就可以将我们的项目打包到 dist 目录下的 bundle.js 文件中去

yarn webpack

webpack 的打包会默认开启生产模式，它会自动帮助我们加载很多插件，去压缩我们的代码，但是这样肯定是不太利于我们去开发的
我们可以通过命令行去指定以什么模式去打包

yarn webpack --mode development

这样我们就以开发模式去打包我们的代码

可以看到开发模式的代码多了很多注释，还会添加一些调试过程中的辅助，当然我们也可以在配置文件中去配置这个模式

const path = require('path')

module.exports = {
   
  // 这个属性有三种取值，分别是 production、development 和 none。
  // 1. 生产模式下，Webpack 会自动优化打包结果；
  // 2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
  // 3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
  mode: 'development',
  entry: './src/main.js',
  output: {
   
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

Webpack Loader

loader 在 Webpack 中扮演着至关重要的角色，下面我们来看看 Webpack 官方文档对 loader 解释

loader 用于对模块的源代码进行转换。
loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

Webpack 的 loader 非常强大，你可以通过 loader 在你的项目中去加载任何资源！

css-loader 和 style-loader

其实 Webpack 内部默认是有 js loader 的，但是它只能处理 js 文件，所以当我们去在模块中引入 css 文件的时候，Webpack 就会报出错误，这个时候 css-loader 就会体现它的作用，它会帮助我们去处理 css 文件，并将这些 css 文件生成一个 js 模块打包到输出的 js 文件中，然后 style-loader 会将这个模块通过 style 标签的形式引入到页面中去

// 安装 css-loader
yarn add css-loader style-loader --dev

安装好 css-loader 和 style-loader 之后我们要在 Webpack 的配置文件中做出如下配置

const path = require('path')
module.exports = {
   
    entry: './src/main.js', // 入口文件
    output: {
   
        filename: 'bundle.js', // 输出文件
        path: path.join(__dirname, 'dist') // 输出目录
    },
    module: {
   
      rules: [
        {
   
          test: /.css$/,
          use: [
            'style-loader',
            'css-loader',
          ]
        },
      ]
    }
}

需要注意的是，loader 的加载默认是从后向前加载，所以 css-loader 要放在后面，因为我们要先将 css 转换成 js 模块，才能正常打包

file-loader

我们在实际开发中，不光要写一些逻辑代码，往往还要引入一些文件去帮助我们去优化项目，例如我们经常会在项目中引入一些图片文件。Webpack 为我们提供了 file-loader 去帮助我们处理这些文件

// 安装 file-loader
yarn add file-loader --dev

安装好 file-loader 之后，我们就可以在配置文件中进行一些配置

module: {
   
    rules: [
        {
   
            test: /\.(png|jpe?g|gif)$/,
            use: "file-loader"
        },
    ]
}

配置好之后，我们再去打包，dist 目录下就会多出打包后的图片，但是如果你这时候打开项目地址的话，你会发现图片加载不进来，这是因为 Webpack 会默认加载项目的根目录，而你的图片是在 dist 目录下的，所以这时候需要你做出一些配置去让它默认加载 dist 目录下的图片，做法就是在输出文件的时候指定根目录

const path = require('path')

module.exports = {
   
  mode: 'none',
  entry: './src/main.js',
  output: {
   
    filename: 'bundle.js',
    path: path.join