Webpack 教程之：Webpack 配置与入门-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个模块打包器，可以将多个模块打包成一个文件，减少 HTTP 请求次数，提高页面加载速度。本文将介绍 Webpack 的基本配置和入门使用。

安装

Webpack 可以通过 npm 安装，首先需要初始化一个 Node.js 项目，然后运行下面的命令安装 Webpack：

npm install webpack webpack-cli --save-dev

配置

Webpack 的配置文件为 webpack.config.js，一般放在项目的根目录下。下面是一个最简单的配置文件：

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

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

其中 entry 表示入口文件（即项目的入口模块），output 表示输出文件（即打包后的文件）。可以看到，入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js。

Webpack 的配置选项非常多，可配置的选项包括：

Entry：入口文件。
Output：输出文件。
Module：模块加载器。
Plugins：插件。
Resolve：解析模块路径。

Loader

在使用 Webpack 进行打包时，可以通过 Loader 处理一些非 JavaScript 文件，比如 CSS、图片等。Loader 可以将这些文件转换为 Webpack 可以识别的模块。下面是一个处理 CSS 文件的 Loader 的配置：

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

上述配置使用了两个 Loader，分别是 style-loader 和 css-loader。css-loader 可以将 CSS 文件转换成模块，style-loader 可以将模块转换成一个 <style> 标签插入到 HTML 中。

Plugin

Webpack 还支持插件，插件可以在打包时执行一些额外的任务，比如压缩代码、生成统计报告等。下面是一个插件的配置：

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

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

上述配置使用了 HtmlWebpackPlugin 插件，该插件可以生成一个新的 HTML 文件，并自动引入打包后的 JS 文件，还可以将打包后的 CSS 插入 HTML 中。

入门示例

下面让我们来一个简单的入门示例，使用 Webpack 打包一个简单的 React 应用。

首先需要安装 React 和 React-DOM：

npm install react react-dom --save

然后在 src 目录下创建 index.js 文件，编写如下代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello, World!</h1>, document.getElementById('root'));

接下来需要创建 index.html 文件，该文件需要引入打包后的 JS 文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

然后在项目根目录下创建 webpack.config.js 文件，配置如下：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};

上述配置使用了 Babel 转义 ES6 语法，需要安装 Babel 相关的依赖：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

最后在命令行中执行：

npx webpack

即可打包项目。打包成功后，可以在 dist 目录下看到生成的 bundle.js 文件。可以使用任何 HTTP 服务器打开 index.html 来查看应用效果。

总结

本文介绍了 Webpack 的配置和入门使用，并讲解了 Loader 和 Plugin 的概念和用法。通过本文的学习，读者可以初步掌握 Webpack 的使用方法，为后续的 Webpack 学习打下基础。

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