webpack 4 打包配置指南

webpack 4 打包配置详解

webpack 4 的打包配置位于 webpack.config.js 文件中。该文件是一个 JavaScript 模块，它导出一个包含 webpack 配置的对象。webpack.config.js 文件通常位于项目的根目录中。

webpack 4 的打包配置对象包含以下属性：

• entry ：指定 webpack 的入口文件。
• output ：指定 webpack 的输出文件。
• module ：指定 webpack 的模块加载器。
• plugins ：指定 webpack 的插件。

1. entry

entry 属性指定 webpack 的入口文件。入口文件是 webpack 打包的起点。webpack 将从入口文件开始，递归解析其依赖项，并最终生成一个包含所有依赖项的打包文件。

entry 属性可以是一个字符串，也可以是一个数组。如果是一个字符串，则指定一个入口文件。如果是一个数组，则指定多个入口文件。

例如，以下代码指定了 src/index.js 文件作为入口文件：

module.exports = {
  entry: './src/index.js'
};

2. output

output 属性指定 webpack 的输出文件。输出文件是 webpack 打包的结果。webpack 将把所有依赖项打包到输出文件中。

output 属性包含以下子属性：

• path ：指定输出文件的路径。
• filename ：指定输出文件名。
• publicPath ：指定 webpack 在引用输出文件时使用的公共路径。

例如，以下代码指定了 dist/bundle.js 作为输出文件：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  }
};

3. module

module 属性指定 webpack 的模块加载器。模块加载器负责将各种模块加载到 webpack 中。webpack 支持多种模块加载器，包括 CommonJS、AMD、ES6 等。

module 属性包含以下子属性：

• rules ：指定 webpack 的模块加载规则。
• loaders ：指定 webpack 的模块加载器。

例如，以下代码指定了 Babel 加载器：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

4. plugins

plugins 属性指定 webpack 的插件。插件可以扩展 webpack 的功能，使其能够执行更多任务。webpack 支持多种插件，包括 UglifyJS Plugin、CopyWebpackPlugin 等。

例如，以下代码指定了 UglifyJS Plugin：

module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
};

webpack 4 常用 Loader 和 Plugin

1. webpack loader

webpack loader 可以将各种类型的文件加载到 webpack 中。例如，Babel loader 可以将 ES6 代码转译成 ES5 代码， Sass loader 可以将 Sass 代码转译成 CSS 代码。

常用的 webpack loader 包括：

• babel-loader ：将 ES6 代码转译成 ES5 代码。
• sass-loader ：将 Sass 代码转译成 CSS 代码。
• css-loader ：将 CSS 代码加载到 webpack 中。
• style-loader ：将 CSS 代码注入到 HTML 中。
• file-loader ：将文件加载到 webpack 中。
• url-loader ：将文件加载到 webpack 中，并将其转换为 base64 编码。

2. webpack plugin

webpack plugin 可以扩展 webpack 的功能，使其能够执行更多任务。例如，UglifyJS Plugin 可以压缩 JavaScript 代码，CopyWebpackPlugin 可以将文件复制到输出目录中。

常用的 webpack plugin 包括：

• UglifyJSPlugin ：压缩 JavaScript 代码。
• CopyWebpackPlugin ：将文件复制到输出目录中。
• HtmlWebpackPlugin ：生成 HTML 文件。
• CleanWebpackPlugin ：删除输出目录中的文件。
• HotModuleReplacementPlugin ：支持热模块替换。

结语

本文详细介绍了 webpack 4 的打包配置。webpack 4 是一款功能强大的打包工具，可以帮助您轻松构建出符合您需求的项目。如果您正在寻找一款打包工具，那么 webpack 4 是一个不错的选择。