前端自动化构建工具：Webpack（二）—— Webpack 开发环境的基本配置

二 webpack 开发环境的基本配置

上一篇文章介绍的，只是简单初步了解一下 webpack。在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，我们通常需要创建一个名为 webpack.config.js 的配置文件取代以上使用命令行 CLI 选项的方式，这比在命令行中手动输入大量命令要高效的多。我们可以直接通过编写这个文件，指定 webpack 需要执行的任务。（这里为了方便统一使用 package.json、package-lock.json 和 node_modules，我将这三个文件都移动到最外层目录 webpack4 下，在当前目录读取不到 node_modules 对应的包时，node 会自动向外层目录一级一级的查找。）

2.1 打包样式资源

我们先来演示一下如何使用 webpack.config.js 文件来配置打包样式资源。这个 webpack.config.js 文件需要使用 common.js 规范导出一个对象（因为 webpack 是基于node 平台运行的，所以模块化方案默认采用 common.js），导出的对象可以包含五个基本属性：entry、output、module（loader的配置）、plugins 和 mode。entry 指定入口起点，它可以是一个字符串（也可以是对象形式指定多入口，这个留到后面再讲）。output 是一个对象，它的 filename 属性指定输出的文件名，而 path属性则指定文件输出的路径。一般指定输出路径，我们会引入 node 的 path 模块下的 resolve 方法，它是一个用来拼接绝对路径的方法。比如我们想要将文件输出到 dist 目录，我们可以将 path 属性写为 resolve（__dirname，'dist'）（ __dirname 是 NodeJs 的变量，代表当前文件的目录绝对路径）。

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');

// webpack.config.js 的配置
module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    filename: 'built.js', // 输出的文件名
    path: resolve(__dirname, 'dist') // 输出路径（__dirname是node的变量，代表当前文件的目录绝对路径）
  },
  // loader的配置
  module: {
    
  },
  // plugins的配置
  plugins: [
  
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

想要让 webpack 处理 css、less 之类的样式文件，我们就需要配置 loader。配置 loader 的地方在 module 属性下的 rules 数组里（ webpack4 之前不叫 module.rules 而是 module.loaders，为了兼容旧版本，module.loaders 属性依旧有效，但 rules 可配置的内容更为强大），该 rules 数组可放置多个对象，每一个对象可用 test 属性去正则匹配指定的文件，用 use 属性去配置使用哪些 loader 对文件进行转换。处理 css 文件，我们需要使用到的 loader 有 css-loader （将 css 文件变成 CommonJs 模块加入 js 中）和 style-loader （创建 style 标签，将 js 中的样式资源插入，并将该 style 标签添加到 head 中）。

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');

// webpack.config.js 的配置
module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    filename: 'built.js', // 输出的文件名
    path: resolve(__dirname, 'dist') // 输出路径（__dirname是node的变量，代表当前文件的目录绝对路径）
  },
  // loader的配置
  module: {
    rules: [
      // 处理 css 文件
      {
        test: /\.css$/, // 用正则匹配以 .css 结尾的文件
        use: [
          'style-loader', // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'css-loader' // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
        ]
      },
      // 处理 less 文件
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader' // 将 less 文件编译成 css 文件
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
  
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production' // 生产模式
}

对于 less 文件，我们还需要 less-loader 来转换成 css 文件。由于 use 数组中 loader 的执行顺序是从右往左、从下往上，所以我们在处理的时候，需要按 less-loader、css-loader、style-loader 的顺序从右往左或从下往上填入。当然，要使用这些 loader 之前，我们需要先对它们进行安装，使用 less-loader，我们还需要额外安装 less：

npm install style-loader css-loader less less-loader --save-dev

安装完后，我们创建一个 css 文件和一个 less 文件，并在 index.js 文件中将它们引入：

接着我们在该目录下运行 webpack，你会发现样式文件已经读取成功：

2.2 打包HTML资源

我们写前端页面肯定离不开 html 结构，webpack 的 html-webpack-plugin 插件会自动帮我们创建一个空的 html 文件并自动引入打包输出的所有资源（如 js、css）。当然，这个插件并不是 node 内置的。在使用之前我们需要先进行安装：

npm i html-webpack-plugin --save-dev

安装完后我们在 webpack.config.js 文件引入该插件并在 plugins 属性中将其实例化：

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

// webpack.config.js 的配置
module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    filename: 'built.js', // 输出的文件名
    path: resolve(__dirname, 'dist') // 输出路径（__dirname是node的变量，代表当前文件的目录绝对路径）
  },
  // loader的配置
  module: {

  },
  // plugins的配置
  plugins: [
    // 不传参数时,自动帮我们创建一个空的html文件，并自动引入打包输出的所有资源（JS/IMG)
    new HTMLWebpackPlugin()
  ],
  // 模式
  mode: 'development'
}

接着我们直接运行 webpack，我们会发现，打包出来的 dist 目录额外多了一个 index.html 文件，并自动帮我们引入了打包出来的 built.js 文件：

假如你需要自定义你的 html 结构，你可以给该插件实例化的时候传入如下参数：

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

// webpack.config.js 的配置
module.exports = {
  // 入口
  entry: './src/index.js',
  // 输出
  output: {
    filename: 'built.js', // 输出的文件名
    path: resolve(__dirname, 'dist') // 输出路径（__dirname是node的变量，代表当前文件的目录绝对路径）
  },
  // loader的配置
  module: {

  },
  // plugins的配置
  plugins: [
    // 不传参数时,自动帮我们创建一个空的html文件，并自动引入打包输出的所有资源（JS/IMG)
    new HTMLWebpackPlugin({
      // 复制我们自己编辑的 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/IMG)
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
}

然后我们在 src 目录下创建自己的 html 文件，并执行 webpack：

你会看到生成的 index.html 结构变成了我们自己编写的结构，并同样帮我们引入了打包生成的 built.js 文件：

2.3 打包图片资源

对于图片资源的处理稍微比较复杂一些，我们需要先同时下载一对叫 url-loader 与 file-loader 的 loader，然后在 module 的 rules 中对图片资源进行配置：

npm i url-loader file-loader --save-dev

const { resolve } = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 处理图片资源
      {  
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader' // 需要同时下载 url-loader 与 file-loader
      }
    ]
  },
  mode: 'development'
};

一般我们都是针对 jpg、png 及 gif 结尾的图片进行处理。在配置中我们只需要引入 url-loader 即可（但需要同时安装 file-loader 才可正常使用）。要打包图片资源，首先在入口 index.js 文件中需要对图片资源有所关联。前端使用图片的方式通常是在 css 文件中的 url 属性或者 html 文件中的 img 标签。我们先尝试创建三张图片，并在 less 文件中对它们进行引入：

接着我们修改 src 目录下的 index.html 如下，并同时修改 webpack.config.js 文件：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 处理less文件
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 处理图片资源
      {  
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader' // 需要同时下载 url-loader 与 file-loader
      }
    ]
  },
  plugins: [
    // 处理 html 文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

我们运行 webpack，然后打开打包好的 build 文件夹里的 index.html 文件。我们会发现以 css 属性的方式引入的图片都成功显示了出来，但以 html 的 img 标签引入的图片不能成功进行处理。这个时候，我们需要再借助一个名为 html-loader 的 loader，它可以帮助我们引入 html 文件中的 img 图片，从而能被 url-loader 进行处理：

npm i html-loader --save-dev

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 处理less文件
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 处理图片资源
      {  
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader' // 需要同时下载 url-loader 与 file-loader
      },
      {
        test: /\.html$/,
        // url-loader 无法直接处理 html 文件引入的图片，该 loader 可引入 html 中的 img 并使 url-loader 可对其进行处理
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    // 处理 html 文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

现在重新运行 webpack，你会发现打包好的 html 文件可以读取得到 img 标签引入的图片资源了：

对于 url-loader，其实我们还有一些选项可以进行配置。比如 limit 可以配置对指定大小范围的图片进行 base64 编码处理。这样虽然会导致图片体积变大，文件请求速度更慢，却可以减少请求数量，从而减轻服务器的压力。对于一些小图标，我们通常都会进行 base64 编码处理。我们还可以对打包好的图片进行重命名，打包出来的图片默认是取整张图片的 hash 值，我们可以让图片名只取前10位 hash 值：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 处理less文件
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 处理图片资源
      {  
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader', // 需要同时下载 url-loader 与 file-loader
        options: {  
          limit: 8 * 1024, // 对小于 8kb 的图片进行 base64 编码处理
          name: '[hash:10].[ext]', // 重命名图片, [hash:10]表示取图片的hash的前10位命名，[ext]表示取文件原来扩展名
          // esModule: false // 关闭url-loader的es6模块化，使用commonjs解析
        }
      },
      {
        test: /\.html$/,
        // url-loader 无法直接处理 html 文件引入的图片，该 loader 可引入 html 中的 img 并使 url-loader 可对其进行处理
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    // 处理 html 文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

重新运行 webpack，我们可以看到打包出来的图片名称比原来简短了许多，而对于尺寸小于 8kb 的 vue 图片，则在 built.js 中直接进行了 base64 编码：

url-loader 还可以配置是否开启 es6 模块化。url-loader 默认会使用 es6 模块化进行解析，而以前旧版本的 html-loader，引入图片采用的方式是 commonJs 规范，从而导致解析时会出现问题。将 esModule 属性设为 false，可以关闭 url-loader 的 es6 模块化，让其使用 commonJs 规范解析。不过，现在的 html-loader 已经对 es6 模块化进行了兼容，所以这个配置现在不设置也没有大碍。

2.4 打包其它资源

除了 css 文件和图片文件，我们有时候还需要处理一些其它格式的文件，比如字体图标文件。对于这类资源，我们直接用刚刚没有直接用到的 file-loader 进行处理打包输出即可。对于其它资源的识别，我们不需要一个个去匹配它们的后缀，我们只要用 exclude 属性去排除我们已知的文件格式即可：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源
      {
        exclude: /\.(css|js|html|less)$/, // 排除 css、js、html、less文件
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

这里我引入一些字体图标文件进行测试：

运行 webpack，打开打包后的 index.html 文件，你会发现字体图标都正常呈现出来了：

2.5 配置开发服务器

在之前的开发过程中，我们每次修改文件后，都需要手动重新进行编译，并且再次刷新浏览器才可以查看修改后的效果。为了提高开发效率，我们在开发的过程中，通常需要使用到 webpack-dev-server。webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器，它可以为我们的 webpack 打包生成的资源文件提供 Web 服务。同时，它也提供一些自动化操作，它会对我们 src 目录下的文件进行监听，当我们修改 src 目录下的文件后，它会自动重新进行编译，并为我们自动刷新浏览器。此外，它还为我们提供自动打开浏览器等功能。使用该插件，我们首先需要对它进行安装：

npm i webpack-dev-server --save-dev

此处下载的 webpack-dev-server 版本为最新版本 3.11.2：

接着我们修改 webpack.config.js 文件如下（这里直接复制之前打包 html 资源的文件夹进行修改）：

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  // 配置开发服务器
  devServer: {
    compress: true, // 启动gzip压缩
    port: 8080, // 配置服务器端口号
    open: true // 自动打开浏览器
  }
}

对 webpack-dev-server 的配置在 devServer 对象中，compress 代表启动 gzip 压缩，提高网页的浏览速度和减少服务器网络带宽的使用。port 用于设置服务器的端口号，而将 open 设置为 true，该插件会替我们自动打开浏览器。现在我们运行 webpack-dev-server，但运行命令不是 webpack，而是 webpack serve（此处安装的是 webpack-dev-server 最新版本，以前老版本运行命令为 webpack-dev-server）。我们运行该指令后，会发现浏览器被自动打开了。如果我们修改 src 目录下相关依赖的文件，你会发现浏览器将自动替我们进行刷新。

你可能已经发现，在你的文件夹中并没有打包生成的文件。这是这个插件的特点，它只会在内存中编译打包，而不会将资源输出。如果你需要获得打包后的资源，你可以依旧像之前一样运行 webpack 指令就行了。当然，webpack-dev-server 还有一些其它的属性可以设置，这个我们留到最后面再一起讲解。

2.6 对 JavaScript 进行语法检查

我们在参与团队开发的时候，为了团队成员的开发风格一致，我们常常会启动JS语法检查，来规范每个开发成员的代码。要进行JS语法检查，早期我们使用一个叫 eslint-loader 的 loader，然而它现在已经快废弃了。现在常用的是一个叫 eslint-webpack-plugin 的插件，它同样依赖于一个叫 eslint 的库，但必须是版本在 7.0 以上的。我们先对这两个依赖进行安装：

npm install eslint-webpack-plugin eslint --save-dev

这个插件需要我们设置检查规则，现在业界一般采取的规范是 airbnb 规范 。我们只需要安装 eslint-config-airbnb-base 这个库，然后在 package.json 中的 eslintConfig 属性对该库的规则进行引入，就不需要自己一点点设置检查规则了。要让 eslint-webpack-plugin 插件在 package.json 中读取 eslintConfig 配置，我们还需要借助一个名为 eslint-plugin-import 的插件：

npm i eslint-config-airbnb-base eslint-plugin-import --save-dev

安装完毕后，我们修改 webpack.config.js 与 package.json 文件如下：

// webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 配置JS检查规则
    new ESLintPlugin()
  ],
  mode: 'development'
};

// package.json(JSON文件不支持注释，实际使用时请把注释去掉)
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "可乐",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "eslint": "^7.19.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-webpack-plugin": "^2.4.3",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.0.0",
    "less-loader": "^7.2.1",
    "mini-css-extract-plugin": "^1.3.4",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  // 配置 eslint 规则
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

对于 eslint 规则，我们只需要应用于团队成员编写的 JS 文件，而不需要去 node_modules 中的第三方库。因为这些库已经是打包好的资源文件，并且极其庞大，对它们进行无谓的检查将非常消耗时间，我们接着在 webpack.config.js 文件中对 eslint-webpack-plugin 插件进行配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 配置JS检查规则
    new ESLintPlugin({
      fix: true, // 对打包生成的文件自动纠错
      extensions: ['js', 'json'], // 只检查 js、json 结尾的文件
      exclude: '/node_modules/' // 排除 node_modules
    })
  ],
  mode: 'development'
};

现在我们在 index.js 中尝试写一些代码：

然后运行一下 webpack：

你就会看到在命令行面板报出的各种检查错误，比如 ‘xxx' is defined but never used（ 'xxx' 变量已被定义但从未使用）。由于刚才配置了 fix 属性为 true，该插件会自动帮我们进行一定程度的纠正，比如它会将用 var 定义的未曾改变过的变量改为用 const 定义：

当然，在开发的过程中，如果我们每次保存代码都要去看一下命令行面板，那是令人相当崩溃的事。好在 devServer 是支持把 eslint 报错信息直接显示在浏览器页面上的，我们只需在上一节配置的 devServer 中增加一个 overlay 为 true 的属性：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 配置JS检查规则
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'development',
  devServer: {
    overlay: true, // 在浏览器上全屏显示编译的 errors 或 warnings
    compress: true,
    port: 8082,
    open: true
  }
};

现在我们运行一下 webpack serve，你会看到报错信息显示到页面上来了。如果你进行纠正后，报错信息也会随之消失：

如果你有时候希望自己写的那一行代码不要进行检查，你只要在它上面按照 JS 写注释的方式，在那行代码上面写上这么一句就好了：

写上这一条注释，在这条注释下面一行的代码，将不会进行 eslint 语法检查。

此外，eslint 也支持我们重置一些默认的检查规则，我们可以在 package.json 文件的 eslintConfig 属性的 rules 中进行重置。airbnb-base 默认不支持 console.log 语句，但在开发环境我们总是要用到，这时只要按以下代码进行修改即可：

// package.json(JSON文件不支持注释，实际使用时请把注释去掉)
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "可乐",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "eslint": "^7.19.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-webpack-plugin": "^2.4.3",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.0.0",
    "less-loader": "^7.2.1",
    "mini-css-extract-plugin": "^1.3.4",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  // 配置 eslint 规则
  "eslintConfig": {
    "extends": "airbnb-base"，
    "rules": {
      "no-console": "off" // 允许使用 console 语句
    }
  }
}

还有一点需要提一下的是，airbnb-base 是不认识浏览器的 window 变量的，而我们写 JavaScript 代码的时候不可避免的要访问到 window 变量，此时只要给 eslintConfig 的 env 属性里的 browser 设置为 true 即可：

// package.json(JSON文件不支持注释，实际使用时请把注释去掉)
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "可乐",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "eslint": "^7.19.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-webpack-plugin": "^2.4.3",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.0.0",
    "less-loader": "^7.2.1",
    "mini-css-extract-plugin": "^1.3.4",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  // 配置 eslint 规则
  "eslintConfig": {
    "extends": "airbnb-base"，
    "rules": {
      "no-console": "off" // 允许使用 console 语句
    },
    "env": {
      "browser": true
    }
  }
}

更多关于 eslint 的配置，可查看 eslint 官方文档 。

2.7 开发环境配置总结

最后，我们可以尝试着对我们之前开发环境的配置做一下总结了。开发环境的配置包括对样式资源的处理、对 html 资源的处理、对图片资源的处理、对其它资源的处理以及对开发服务器的配置和对JS的语法检查。现在，我们将之前所有的配置进行一下整合，便得到了 webpack 关于开发环境的基本配置了：

// resolve是用来拼接绝对路径的方法
const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 打包样式资源 
      {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      // 打包图片资源
      {  
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader', // 需要同时下载 url-loader 与 file-loader
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs' // 输出路径取决于你引入路径
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 打包其他资源
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'assets' // 输出路径取决于你引入路径
        }
      }
    ]
  },
  plugins: [
    // 打包 html 资源
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
    // 配置JS检查规则
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'coffee'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'development',
  // 配置开发服务器 (需要下载 webpack-dev-server )
  devServer: {
    overlay: true, // 在浏览器上全屏显示编译的 errors 或 warnings
    compress: true, // 启动gzip压缩
    port: 8080, // 配置服务器端口号
    open: true // 自动打开浏览器
  }
}

// package.json(JSON文件不支持注释，实际使用时请把注释去掉)
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "可乐",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "eslint": "^7.19.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-webpack-plugin": "^2.4.3",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "less": "^4.0.0",
    "less-loader": "^7.2.1",
    "mini-css-extract-plugin": "^1.3.4",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  },
  // 配置 eslint 规则
  "eslintConfig": {
    "extends": "airbnb-base"，
    "rules": {
      "no-console": "off" // 允许使用 console 语句
    },
    "env": {
      "browser": true
    }
  }
}

文件的目录结构如下：

为了规范管理，在这里将不同类型的文件放入不同的文件夹中，在输出的时候就需要注意用 outputPath 指定输出文件的路径。现在，你可以尝试运行 webpack 或 webpack serve，来查看 webpack 开发环境基本配置的效果了。