从零开始搭建 Webpack 配置-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中不可缺少的工具，通过它，我们能够实现模块化、打包、优化等一系列功能。本文将从零开始搭建一个简单的 Webpack 配置，并解释其中的细节，希望能帮助读者更全面地理解 Webpack。

安装 Webpack

在开始之前，我们需要全局安装 Webpack：

npm install webpack webpack-cli -g

为了方便后续操作，我们在一个新的目录中创建一个空的项目：

mkdir webpack-demo && cd webpack-demo
npm init -y

配置文件

Webpack 的配置文件为 webpack.config.js，我们在项目根目录下创建该文件，并编写以下代码：

// javascriptcn.com 代码示例
const path = require('path');

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

这里，我们使用 path 模块将相对路径转为绝对路径，entry 字段指定了项目的入口文件，output 字段指定了打包后的文件名和路径。

加载器

除了 JavaScript 文件，Webpack 还支持加载其他类型的文件，例如 CSS、图片等。为了能够加载这些文件，我们需要使用加载器。

CSS 加载器

首先，我们来添加 CSS 支持。在 Webpack 中，我们需要使用 css-loader 和 style-loader 这两个加载器来处理 CSS 文件。css-loader 可以把 CSS 文件转换成 JS 模块，style-loader 可以将这个 JS 模块变成一个 <style> 标签插入到 HTML 中。

首先，我们安装这两个加载器：

npm install css-loader style-loader -D

接着，在 webpack.config.js 中添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

这里，test 字段指定了加载器应该处理的文件类型，use 字段指定了使用的加载器。

图片加载器

我们还可以使用 file-loader 或 url-loader 来加载图片资源。file-loader 可以把文件原封不动地复制到输出目录中，url-loader 则可以把小图片转换成 Base64 编码，减少图片请求的次数。

npm install file-loader url-loader -D

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

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
};

这里，limit 字段指定了图片大小限制，如果图片大小小于等于限制则使用 Base64 编码。

插件

Webpack 还提供了一些插件，用于优化打包文件或实现其他功能。

HTML 插件

html-webpack-plugin 插件可以为我们生成一个 HTML 文件，并将打包后的 JS 文件自动引入进去。这个插件非常方便，我们安装它：

npm install html-webpack-plugin -D

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

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

这里，template 字段指定了模板文件。

热更新插件

在开发中，我们通常希望在修改代码后不用刷新页面就可以看到效果。webpack-dev-server 提供了方便的热更新功能，我们可以使用 webpack-dev-middleware 和 webpack-hot-middleware 插件来实现这个目的。

npm install webpack-dev-server webpack-dev-middleware webpack-hot-middleware -D

我们需要在 webpack.config.js 中添加以下代码：

// javascriptcn.com 代码示例
const webpack = require('webpack');
const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

这里，contentBase 指定了静态资源的路径，hot 指定启动热更新。最后，我们需要通过 devServer.use 加载中间件：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(devMiddleware(compiler, { publicPath: config.output.publicPath }));
app.use(hotMiddleware(compiler));

app.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

完整的配置文件

最后，我们来看一下完整的 webpack.config.js：

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

总结

本文介绍了如何搭建一个简单的 Webpack 配置，并添加了 CSS、图片、热更新等功能。Webpack 是一个功能强大的工具，通过不断地学习和实践，我们可以不断地提升我们的前端开发能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65439b127d4982a6ebd6553e