Webpack 实战入门系列（三）：生产配置、样式文件分离及输出清理

现在，Vue 和 React 等框架非常流行，新项目基本都使用这些新框架，组件化开发确实是趋势，但它们再怎么发展也离不开构建工具，最多也就是在 webpack 等工具上进行再封装。现在 Vue CLI 3 发布后，我感觉学习成本反而变高了，直观的感觉就是文档不清晰，知识零碎。但其实回到本源，Vue CLI 3 就是基于 Webpack 的。

Webpack 是一个 JavaScript 构建工具，它可以将许多模块化的 JavaScript 文件打包成一个或多个 JavaScript 文件，以便在浏览器中运行。Webpack 还可以用来处理其他类型的文件，如 CSS 文件、图片文件等。

在前面的文章中，我们介绍了如何使用 Webpack 搭建一个开发环境，并在开发环境中使用 Webpack Dev Server 来实现热更新功能。在本文中，我们将介绍如何配置 Webpack 生产环境，实现样式文件分离和输出清理，使项目更适合生产环境部署。

一、配置 Webpack 生产环境

在 package.json 文件中，添加以下命令：

"scripts": {
  "build": "webpack --mode production"
}

然后，运行以下命令即可打包生产环境代码：

npm run build

Webpack 会在项目根目录下生成一个名为 dist 的文件夹，里面包含打包后的生产环境代码。

二、样式文件分离

在开发环境中，我们使用 style-loader 将样式文件直接注入到 HTML 文档中。但在生产环境中，我们应该将样式文件单独打包成一个 CSS 文件，以便减少 HTTP 请求数，提高页面加载速度。

要实现样式文件分离，我们需要在 webpack.config.js 文件中进行如下配置：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  // ...
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  // ...
};

其中，MiniCssExtractPlugin 是一个用于将样式文件提取到单独 CSS 文件的插件。

三、输出清理

在打包生产环境代码时，我们应该清理掉一些不需要的临时文件，如 source map 文件、开发环境特有的文件等。

要实现输出清理，我们需要在 webpack.config.js 文件中进行如下配置：

module.exports = {
  // ...
  optimization: {
    minimize: true,
    clean: true
  },
  // ...
};

其中，minimize 选项用于压缩 JavaScript 代码，clean 选项用于清理不需要的临时文件。

四、总结

本文介绍了如何配置 Webpack 生产环境，实现样式文件分离和输出清理，使项目更适合生产环境部署。这些技巧可以帮助我们构建出更高质量的项目，提高项目的性能和安全性。

我希望这篇文章对您有所帮助。如果您有任何问题，请随时留言。