从头到尾入门webpack4.x

2023-11-01 15:17:09

用 webpack 4.x 打造现代 JavaScript 应用程序

随着 JavaScript 技术的不断发展，Webpack 作为一款现代化 JavaScript 模块打包工具，凭借其强大的功能和高效的处理能力，深受开发者们的青睐。而 Webpack 4.x 版本的发布更是带来了众多令人兴奋的新特性，为开发者们提供了更便捷高效的构建体验。

配置开发版本

对于开发者来说，快速编译和打包代码至关重要。Webpack 4.x 的开发版本能够自动监听代码的变化，并在代码发生变化时自动重新编译和打包，极大地提升了开发效率。

要配置 Webpack 4.x 的开发版本，只需在项目中安装 webpack-dev-server 包，并在 webpack.config.js 文件中编写如下代码：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

编译打包 CSS 和 JS

除了 JavaScript 模块，Webpack 4.x 还能够编译打包 CSS 和 JS 文件。在 webpack.config.js 文件中添加以下代码，即可实现这一功能：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

生成 MD5

为每个模块生成唯一的 MD5 标识符，有助于确保每次打包时，模块的输出文件名都会发生变化，从而避免浏览器缓存旧的模块文件。Webpack 4.x 提供了 HashedModuleIdsPlugin 插件来实现这一功能：

plugins: [
  new webpack.HashedModuleIdsPlugin()
]

处理 CSS 中的图片

Webpack 4.x 支持处理 CSS 中的图片，只需在 webpack.config.js 文件中添加以下代码：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }
      ]
    }
  ]
}

自动注入 JS 到 HTML

通过 HtmlWebpackPlugin 插件，可以自动将打包后的 JS 文件注入到 HTML 模板文件中：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: './index.html'
  })
]

删除指定文件

Webpack 4.x 的 CleanWebpackPlugin 插件可以自动删除指定的文件或目录：

plugins: [
  new CleanWebpackPlugin(['dist'])
]

提取公共文件

Webpack 4.x 能够提取公共文件，优化应用程序的性能：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

热更新

webpack-dev-server 的热更新功能，可以自动重新编译和打包代码，并自动刷新浏览器中的页面：

devServer: {
  hot: true
}

结论

Webpack 4.x 是构建现代 JavaScript 应用程序的利器，本文介绍了如何使用 Webpack 4.x 配置开发版本、编译打包 CSS 和 JS、生成 MD5、处理 CSS 中的图片、自动注入 JS 到 HTML、删除指定文件、提取公共文件和进行热更新等操作。掌握这些功能，可以显著提升你的 JavaScript 开发效率，构建出更强大、更稳定的应用程序。

常见问题解答

Webpack 4.x 与 Webpack 3.x 有什么区别？

Webpack 4.x 引入了许多新特性和优化，包括 Tree Shaking、长期缓存、SplitChunks 等，提供了更强大的模块化构建解决方案。
如何使用 Webpack 4.x 进行代码分割？

Webpack 4.x 的 SplitChunks 插件可以提取公共代码块，减少 bundle 大小，提升性能。
如何使用 Webpack 4.x 构建生产版本？

将 webpack.config.js 文件中的 mode 属性设置为 'production'，启用 Tree Shaking 和压缩等优化措施。
如何使用 Webpack 4.x 处理 TypeScript 文件？

安装 typescript 和 ts-loader 包，在 webpack.config.js 文件中配置 TypeScript 规则。
如何使用 Webpack 4.x 优化图像？

安装 image-webpack-loader 包，在 webpack.config.js 文件中配置图像优化规则。