详解Webpack 4.x之搭建前端开发环境

简介

Webpack 是一个模块打包工具，它可以把多个模块打包成一个文件并且可以自动解决依赖关系。Webpack4.x 版本相对于之前版本进行了优化和改进。

本文将详细讲解使用 Webpack 4.x 搭建前端开发环境的完整攻略。

步骤

第一步：安装Node.js

Webpack 是基于 Node.js 开发的，首先需要安装 Node.js。可从官网 https://nodejs.org/ 下载安装。

第二步：初始化项目

在命令行窗口中进入项目根目录，输入以下命令初始化项目：

npm init -y

这个命令将生成一个 package.json 文件，其中包含了项目的描述信息和依赖项列表。

第三步：安装Webpack及其他依赖

在命令行窗口中输入以下命令安装 Webpack 及其他相关依赖：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

其中：
- webpack：Webpack的主模块；
- webpack-cli：Webpack命令行工具；
- webpack-dev-server：Webpack开发服务器；
- html-webpack-plugin：自动生成HTML文件的插件。

第四步：创建Webpack配置文件

在项目根目录中创建一个名为 webpack.config.js 的文件，内容如下：

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

module.exports = {
  mode: 'development', //开发环境
  entry: path.resolve(__dirname, 'src', 'index.js'), //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //输出目录
    filename: 'bundle.js', //输出文件名
  },
  devServer: {
    port: 8080, //启动端口
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'), //模板文件
      filename: 'index.html', //生成文件名
    }),
  ],
};

其中：
- mode：设置为 development 是为了方便调试，不会进行代码压缩，也不会进行 tree shaking 等优化；
- entry：指定入口文件；
- output：指定输出目录和输出文件名；
- devServer：Webpack 开发服务器配置；
- plugins：使用插件生成 HTML 文件。

第五步：添加HTML文件

在项目根目录中创建一个名为 index.html 的 HTML 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Webpack4.x Demo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

这个 HTML 文件中包含了一个空的 div，Webpack 的输出文件将被自动添加到这个 div 中。

第六步：添加入口文件和ES6语法转换支持

在项目根目录中创建一个名为 index.js 的入口文件，内容如下：

import './index.css';
document.getElementById('app').innerHTML = 'Hello Webpack4.x!';

Webpack 默认只支持标准的 CommonJS 模块，不支持 ES6 模块语法，需要借助 babel-loader 转换为 CommonJS 模块。

在命令行窗口中输入以下命令安装 babel-loader 和依赖：

npm install babel-loader @babel/core @babel/preset-env -D

在 webpack.config.js 文件中添加以下规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

其中：
- test：规则匹配的文件类型；
- exclude：排除 node_modules 文件夹；
- loader：使用的加载器；
- options：babel-loader 的配置选项；
- presets：使用的编译规则，这里使用 @babel/preset-env 来编译 ES6 语法。

第七步：添加CSS文件支持

在入口文件 index.js 中添加以下代码引入 CSS 文件：

import './index.css';