webpack 4 简单介绍

Webpack 是一个 JavaScript 模块打包工具。它可以将多个 JavaScript 模块打包成一个文件，并且可以处理 CSS、图片等其他类型的文件。Webpack 在前端开发领域获得了广泛的应用，是构建现代 Web 应用的重要工具。

最近，Webpack 4 正式发布，新版本带来了很多新特性和改进。本文将简单介绍 Webpack 4 的一些主要特性和用法。

安装

安装 Webpack 4 可以通过 npm 命令来完成：

npm install webpack webpack-cli --save-dev

可以看到，Webpack 4 将其命令行工具分离出来，需要单独安装 webpack-cli。

配置文件

Webpack 4 的配置文件默认是 webpack.config.js，配置文件用于告诉 Webpack 如何处理项目中的模块。一个最简单的配置文件如下：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

这个配置文件告诉 Webpack 找到 src/index.js 文件作为入口，将其打包成 dist/bundle.js。

Mode

Webpack 4 新增了一个选项 mode，用于设置 Webpack 的模式。模式可以设置为 development、production 或 none，分别对应开发模式、生产模式和既不是开发模式也不是生产模式。

module.exports = {
  mode: 'production', // 'development' or 'none' are also valid
  // ...
};

在生产模式下，Webpack 会启用一系列优化措施，如代码压缩等，以提高项目的性能。在开发模式下，Webpack 会开启更多的调试功能。

Loader

Webpack 4 仍然支持各种 Loader 来处理不同类型的文件。在配置文件中使用 Loader 需要在 module.rules 中设置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

上面的代码使用了 style-loader 和 css-loader 来处理 CSS 文件，使用了 file-loader 来处理图片文件。

插件

Webpack 4 还支持各种插件来扩展其功能。在配置文件中使用插件需要在 plugins 中设置。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

上面的代码使用了 HtmlWebpackPlugin 插件来生成一个 HTML 文件，并将打包生成的代码自动引入到 HTML 中。

总结

以上是 Webpack 4 的一些简单介绍。Webpack 4 带来了很多新特性和改进，如增强的性能、更简化的配置和更丰富的插件支持等。对于前端开发者来说，掌握 Webpack 4 是很有必要的。