Webpack 4.x 新手入门

Webpack 4.x 新手入门

Webpack 是一个现代化的 JavaScript 模块打包器，可以将各种类型的模块组合成一个或多个资源，并支持各种各样的格式和依赖管理。它的出现彻底改变了前端开发的生态系统，使得模块化和代码复用变得更加容易。

一、安装

Webpack 的安装分为两种方式：全局安装和本地安装。

1. 全局安装

npm install webpack -g

全局安装后，可以通过 webpack 命令直接执行 webpack 程序，如下：

webpack

2. 本地安装

npm install webpack --save-dev

本地安装后，需要在项目目录下执行以下命令来运行 webpack：

npx webpack

二、配置

Webpack 的配置文件通常命名为 webpack.config.js，它是一个 JavaScript 文件，用于配置 webpack 的各种参数。在 webpack.config.js 文件中，我们可以定义以下内容：

• 入口文件：指定 webpack 的入口文件，通常是项目的 main.js 文件。
• 输出文件：指定 webpack 的输出文件，通常是 bundle.js 文件。
• 加载器：用于加载和转换各种类型的模块，例如 JavaScript、CSS、图片等。
• 插件：用于扩展 webpack 的功能，例如提取 CSS、压缩代码等。

以下是一个简单的 webpack.config.js 文件示例：

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

三、热加载

热加载（hot reloading）是一种非常实用的功能，它可以使我们在开发过程中，无需刷新浏览器即可看到代码的修改结果。要在 webpack 中启用热加载，我们需要安装 webpack-dev-server 包：

npm install webpack-dev-server --save-dev

然后在 webpack.config.js 文件中添加以下配置：

devServer: {
  contentBase: './dist',
  hot: true
}

四、分离代码

在实际开发中，我们的项目往往会变得非常庞大，此时将所有的代码都打包到一个文件中会严重影响页面的加载速度。为了解决这个问题，我们可以使用代码分离（code splitting）技术将代码拆分成多个文件，只在需要的时候才加载它们。

Webpack 提供了多种代码分离方法，最常用的是动态导入（dynamic import）：

const module = await import('./module.js');

动态导入会创建一个新的请求，只在需要的时候才加载模块。

五、结语

Webpack 是一个功能强大且灵活的工具，它可以帮助我们轻松构建复杂的 JavaScript 项目。本文只是对 Webpack 4.x 的入门介绍，想要深入了解 Webpack，还需要进一步的学习和实践。