Webpack：使用 webpack-dev-server 编译、写入磁盘和提供静态内容

Webpack 是一个由 JavaScript 驱动的静态模块打包器，它可以将从不同模块中收集到的代码转换为附带优化和处理的前端资源文件。Webpack 接受的所有文件从入口文件开始形成依赖图，并且它们都被处理成输出包。Webpack 的核心是一个在命令行使用的静态资源打包工具，但同时还包含了 Webpack DevServer，一种 Web 服务器，可以为代码提供实时重载、编译、写入磁盘和提供静态内容等功能。

安装与使用

如果你还没有安装 Webpack，可以通过下面的命令进行安装：

npm install webpack webpack-cli --save-dev

同时，为了使用 Webpack DevServer，我们还需要将其安装：

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

安装好之后，我们就可以在项目中使用 Webpack DevServer。在项目根目录中新建一个名为 webpack.config.js 的文件，输入以下代码：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
  },
};

上面的代码定义了入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js，同时还设置了 DevServer 的静态文件目录为 ./dist。接下来，我们在 package.json 的 scripts 中添加如下命令：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --open"
  }
}

启动 DevServer 的方式如上所示，其中 mode 参数是告诉 Webpack 当前的开发模式，open 参数会在启动 Webpack DevServer 后自动打开浏览器访问网址。

最后，在命令行中执行 npm start 命令即可启动 DevServer。

静态资源文件

除了 JavaScript 文件之外，Webpack 还可以处理静态资源文件，例如 CSS、HTML、图片等。

CSS

Webpack 提供了一个叫做 css-loader 的模块，它可以加载处理 CSS 文件，并且可以提供多个文件的组合和压缩。使用 css-loader 需要同时将 style-loader 配置进来，这样 CSS 代码就会被注入到 HTML 中。

在 webpack.config.js 中增加以下代码，配置 css-loader 和 style-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

此时，可以在项目中同时加载多个 CSS 文件，例如：

import "./index.css";
import "./app.css";

HTML

Webpack 提供了一个可以将 HTML 文件作为入口文件进行打包的插件 html-webpack-plugin。使用该插件需要先安装：

npm install html-webpack-plugin --save-dev

然后在 webpack.config.js 中添加以下代码：

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

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

此时，Webpack 会将 src/index.html 作为入口文件进行打包，并且会自动注入 bundle.js。

图片

Webpack 可以将小图片（小于 10KB）转换为 Data URL，也可以将大图片复制到输出目录。

对于小图片，使用 url-loader 即可。在 webpack.config.js 中添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024,
            },
          },
        ],
      },
    ],
  },
};

对于大图片，使用 file-loader 即可。在 webpack.config.js 中添加以下代码：

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

结语

使用 Webpack DevServer 可以帮助我们快速实现代码热重载、编译、静态文件提供等功能，更好的支持项目开发。此外，Webpack 还能处理多种静态资源文件，并且支持模块化开发，使得前端工程化变得更加简单高效。