1. Webpack 简介及相关知识

Webpack —— JavaScript应用模块打包工具。

1.1 核心概念：

Webpack 有四个核心概念：

entry（入口）
单入口——单页面应用
多入口——多页面应用
output（输出）
path: 输出路径（必须是绝对路径） path.resolve
filename: 输出文件名
loaders
编译文件
plugins（插件）
webpack 功能扩展

1.2 相关知识（Node.js & ES6 模块化）

1.2.1 Node.js

Node.js 是 javascript的服务器版本，Webpack 在执行打包压缩时是依赖 Node.js 的。

1.2.2 ES6 模块化

1.2.2.1 export 导出

//分别导出一个或几个变量(函数）
export let a = 1;
export const b = 2;
export function fn(){
    console.log('fn')
}

//导出一个对象
let a = 1;
const b = 2;
function fn(){
    console.log('fn')
}
export { a, b, fn };

//导出默认成员——仅能导出一个，默认引入的就是这一个
export default let a = 1;

1.2.2.2 import 导入

//引入所有成员(as —— 给引入的值重命名)
import * as name from 'xxx'; 
//引入 default 成员
import a from 'xxx';   
//只引入：引入 css 或 函数
import 'xxx';
//异步引入
let a =import("./util");

2.开始使用 Webpack —— 搭建项目

2.1 新建项目

npm init
npm i webpack webpack-cli --save-dev

初始化项目，并安装 Webpack 依赖，安装 webpack-cli 才能在命令行运行 webpack 命令。

2.2 webpack 配置

创建并配置 webpack.config.js

单入口 | 单输出
根目录内新建 src 文件夹，新建 index.js 文件。

index.js 文件：

console.log('index')

webpack.config.js 文件

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

多入口 | 多输出
根目录内新建 src 文件夹，新建 index.js 及 home.js 文件。

index.js 文件：

console.log('index')

home.js 文件：

console.log('home')

webpack.config.js 文件

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  }
}

2.3 node 命令配置

配置 package.json 文件，验证基本配置

修改 script 属性：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

运行 npm run build 执行 webpack 命令，验证输入输出配置。
根目录内会生成 dist 文件夹，里面有对应的文件生成。
多入口

2.4 文件引入

在 index.html 中引入打包好的 js 文件
方式一：手动引入
新建 index.html，并直接手动引入 js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script src='./dist/index.min.js'></script>
<script src='./dist/home.min.js'></script>
</html>

打开 index.html，即已成功引入编译好的 index.min.js 及 home.min.js，执行里面的代码。

3.plugins —— 扩展 webpack 功能

前面已经可以使用 webpack ，但开发过程中，每次都要手动引用 js 文件，更改代码后还要重新编译是很麻烦的，所以我们接下来看下 webpack 的 plugins，来便于开发。

3.1 自动生成 html

可通过插件html-webpack-plugin，由指定的 html 模板生成新的 html 文件，并自动引入所需 js 等内容。

1）执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。

2）新建 index.ejs 文件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

3）修改 webpack.config.js 的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML',  //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    })
  ]
}

4）重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。

自动引入

index.html 文件

<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>New HTML</title></head><body><div id="root"></div><script type="text/javascript" src="index.min.js"></script><script type="text/javascript" src="home.min.js"></script></body></html>

3.2 删除旧文件

再次打包时需删除旧文件

3.2.1 更改配置

修改 webpack.config.js ，将输出的 index.html 文件名改为其他的，如 indexNew.html

image

运行 npm run build ，生成的 dist 内文件列表如下：

image

之前生成的无用文件 index.html 还在，这里可以使用插件 clean-webpack-plugin 来删除 webpack.config.js 中 output.path 目录中的所有文件。

3.2.2 安装依赖

运行 npm install clean-webpack-plugin --save-dev 安装依赖。

3.2.3 验证

修改 webpack.config.js 配置。

image

再次运行 npm run build ，生成的 dist 内文件列表如下：

image

可见之前生成的 indexNew.html 文件已被删除。

3.3 自动打开浏览器，支持热更新

3.3.1 安装依赖

npm i open-browser-webpack-plugin webpack-dev-server --save-dev

3.3.2 更改配置

修改 webpack.config.js 配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ]
}

3.3.3 更改 node 命令

修改 package.json ，添加 start ，使得运行 npm run start 可直接执行 webpack-dev-server 命令。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },

3.3.4 测试

执行 npm run start：

1）浏览器会自动打开 http://localhost:8080；

2）修改 index.js 文件，保存文件，浏览器会自动刷新，更新内容。

3.4 代码调试定位 —— sourcemap

代码经过编译、打包后，与源代码已有很大差异，不便于调试。

source-map 会解决这个问题，生成 .map 文件，便于错误定位调试。

开启方法：在 webpack.config.js 文件中添加一行配置：devtool: "source-map"

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  //编译前文件调试
  devtool: "source-map"
}

如上，即可。可通过打印等方式进行测试。

4. loader

loader ——文件编译。

4.1 ES6 & React 编译 —— babel-loader

Babel 是一个 JavaScript 编译器，Webpack 使用 babel-loader 来编译 ES6。
此处我们要创建一个 React 项目，所以同时也要添加 React 的相关依赖即配置。

4.1.1 安装依赖

yarn add babel babel-core babel-loader@7.1.2 babel-preset-env babel-preset-react
注：现在直接安装 babel-core 和 babel-loader，安装的版本不对应会报错，所以我在安装时指定了 babel-loader 的版本，避免这个问题。

4.1.2 更改配置

修改 webpack.config.js 如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ["env", "react"],
          }
        }],
        exclude: /node_modules/
      }
    ]
  }
}

4.1.3 修改文件

修改 index.js 及 home.js 文件为 react 语法
home.js文件

import React, { Component } from 'react';

export default class Home extends Component {

  render() {
    return (
      <div style={{backgroundColor: '#0f0'}}>
        home page
      </div>
    );
  }
}

index.js文件

import React from 'react';
import { render } from 'react-dom';
import Home from './home';

render(<Home/>, document.getElementById('root'));

此时，页面效果如下：

image

如上，React 语法被成功编译。

4.2 处理 CSS 文件 —— style-loader & css-loader

4.2.1 修改文件

创建 index.css 文件

.container {
    background-color: aquamarine
}

修改 home.js 文件如下：

import React, { Component } from "react";
import './index.css'

export default class Home extends Component {
  render() {
    return (
      <div className="container">
        home page
      </div>
    );
  }
}

npm run start 重新启动项目，项目会报错如下：

image

4.2.2 安装依赖

npm i style-loader css-loader --save-dev

4.2.3 更改配置

修改 webpack.config.js 配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ["env", "react"],
          }
        }],
        exclude: /node_modules/
      },
      {
        test: /\.css$/i, // 针对 .css 后缀的文件设置 loader
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

添加了针对 .css 文件的 loader，来对 .css 文件进行处理。

image

注：

css-loader：读取并编译 js 中引入的 css 文件
style-loader： html 中创建一个 <style></style> 标签，里面是 css-loader 解析出的 css 样式。
webpack 配置中，style-loader 必须在 css-loader 之前，顺序不可变，即必须先由 css-loader 处理，再由 style-loader 处理。

4.3 处理 LESS 文件 —— less-loader

4.3.1 更改文件

创建 index.less 文件如下：

.container {
    background-color: aquamarine
}

修改 home.js 文件如下：

import React, { Component } from "react";
import './index.less'

export default class Home extends Component {
  render() {
    return (
      <div className="container">
        home page
      </div>
    );
  }
}

4.3.2 安装依赖

npm i less less-loader --save-dev

4.3.3 更改配置

修改 webpack.config.js 配置，module/rules 下添加对于 less 文件的解析：

{
    test: /\.less$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader']
}

4.3.4 验证

重新启动项目，less 文件生效，页面效果如下：

image

4.4 添加浏览器前缀 —— postcss-loader & autoprefixer

autoprefixer 按照浏览器使用量决定需要添加哪些浏览器前缀，postcss-loader 按照 autoprefixer 的结果来添加浏览器前缀。

4.4.1 更改文件

修改 index.less 文件如下：

.container {
    background-color: aquamarine;
    transform: rotate(0deg);
    transition-duration: 1000ms;
}
.container:hover {
    background-color: aquamarine;
    transform: rotate(360deg)
}

4.4.2 安装依赖

npm i less postcss-loader autoprefixer --save-dev

4.4.3 更改配置

修改 webpack.config.js 配置，给 css、less 文件添加 postcss-loader 的解析，
有两种方式：

1）在 webpack.config.js 的 modele/rules 内指定 postcss-loader 的配置

{
    test: /\.css$/, // 针对 .css 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', {
        loader: 'postcss-loader',
        options: {
        plugins: [require('autoprefixer')]
        }
    }]
},
{
    test: /\.(less|css)$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [require('autoprefixer')]
      }
    }]
}

2）修改 webpack.config.js，并单独创建 postcss.config.js ，进行配置
修改webpack.config.js 文件，modele/rules 添加如下配置：

{
    test: /\.css$/, // 针对 .css 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
    test: /\.(less|css)$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}

postcss.config.js 文件

module.exports = {
    plugins: [require('autoprefixer')]
}

相对比而言，我更倾向于第一种，以免创建太多的配置文件，造成混乱。

4.4.4 验证

重新启动项目，查看浏览器元素，样式前缀已添加成功。

image

注：如有需要，可以自己进行支持的浏览器版本配置，有两种方式：

1）添加 .broserslistrc 文件，进行配置

last 3 version  //支持每个版本的最近三个版本
>2%   //大于百分之二的用户使用

2）无需创建新文件，直接在 package.json 文件内添加属性进行配置

  "browserslist": [
    "last 5 version",
    " >1%"
  ]

重新启动，效果如下：

image

按照设置的规则重新对我们的 css 样式添加了前缀。

4.5 处理图片 —— file-loader & url-loader

4.5.1 引入图片

src 文件夹下创建 images 文件夹，并添加 bg.png 图片

image

修改 index.less 文件如下：

.container {
    width: 100%;
    height: 600px;
    background: url('./images/bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

重新启动项目，会报错如下：

image

4.5.2 安装依赖 —— file-loader

如上，需要配置对应的 loader 来解析图片。

执行npm i file-loader --save-dev，安装依赖。

4.5.3 更改配置 —— file-loader

修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
    test: /\.(png|jpg|jpeg|gif)$/i, // 针对 .png|.jpg|.jpeg | .gif 后缀的图片设置 loader
    use: [{
      loader: 'file-loader',
      options: {
        outputPath: 'imgs/', //相对于 output.path 的输出目录
      }
    }]
}

重启项目，则引入图片成功，效果如下：

image

file-loader 可以解析项目中的图片引入，根据配置，将图片输出到相应路径，并修改打包后文件中的引用路径，使其指向打包后的文件。

4.5.4 安装依赖 —— url-loader

针对图片引用，url-loader 封装了 file-loader。
增加了 limit 属性，文件大小大于 limit 值，会调用 file-loader 进行处理；
文件大小小于 limit 值，会将文件转为 base64 格式，以减少文件请求次数。
安装 url-loader 依赖

npm i url-loader --save-dev

4.5.5 更改配置 —— url-loader

修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
        test: /\.(png|jpg|jpeg|gif)$/i, // 针对 .png|.jpg|.jpeg | .gif 后缀的图片设置 loader
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: 'imgs/', //相对于 output.path 的输出目录
            limit: 8*1024 //大于此数值依旧用 file-loader处理，打包到 imgs 里面，小于此数值的转为 base64，以减少文件请求次数
          }
        }]
      }

重启项目，图片引用成功，执行 npm run build，可发现，大于 8k 的图片会被打包到 dist/imgs 文件夹内，小于 8k 的则不会被打包输出，而是转为 base64 。

image

4.6 处理文字 —— file-loader & url-loader

4.6.1 引入字体

src 文件夹下一个字体文件——difital-7.ttf，这是一个液晶字体文件，修改 index.less 文件如下：

image

@font-face{
    font-family: "digital";
    src: url(./digital-7.ttf);
}
.container {
    width: 100%;
    height: 600px;
    background: url('./images/bgimg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: "digital"
}

保存项目编译后，会报错如下：

image

4.6.2 更改配置

同图片，需要配置对应的 url-loader 来解文字片，修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/i, // 针对 eot|svg|ttf|woff|woff2 后缀的字体设置 loader
    use: [{
        loader: 'url-loader',
        options: {
        outputPath: 'fonts/', //相对于 output.path 的输出目录
        limit: 4*1024 //大于此数值依旧用 file-loader处理，打包到 fonts 里面，小于此数值的转为 base64，以减少文件请求次数
        }
    }]
}

重新启动项目，则字体引用成功，效果如下：

image

通过修改 limit 值，重新打包，可测试 limit 值设置是否有效。

5. 开发/生产模式

5.1 开发/生产模式的区别

开发模式需要进行调试，需要自动打开浏览器，而生产模式不需要
生产模式需要设置打包文件目录，需要启用压缩，忽略错误。

上述区别需要通过两个设置来实现。

5.1.1 设置 process.env.NODE_ENV

在 webpack.config.js 中通过判断 env 的值，来进行不同的配置

修改 package.json 来设置 process.env.NODE_ENV：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env.development",
    "build": "webpack --env.production",
    "eslint": "eslint --init"
  },

根目录下新建 config 文件夹，并在下面新建 webpack.production.config 和 webpack.development.config 文件。

webpack.config.js 文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')

module.exports = function(env, argv) {
  console.log('env', env)
  env = env || { development: true }

  return {
    entry: {
      index: './src/index.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/i,
          use: [{
            loader: "babel-loader",
            options: {
              presets: ["env", "react"],
            }
          }],
          exclude: /node_modules/
        },
        {
          test: /\.css$/i, // 针对 .css 后缀的文件设置 loader
          use: ['style-loader', 'css-loader', {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }]
        },
        {
          test: /\.(less|css)$/i, // 针对 .less 后缀的文件设置 loader
          use: ['style-loader', 'css-loader', 'less-loader', {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }]
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/i, // 针对 .png|.jpg|.jpeg | .gif 后缀的图片设置 loader
          use: [{
            loader: 'url-loader',
            options: {
              outputPath: 'imgs/', //相对于 output.path 的输出目录
              limit: 8*1024 //大于此数值依旧用 file-loader处理，打包到 imgs 里面，小于此数值的转为 base64，以减少文件请求次数
            }
          }]
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/i, // 针对 eot|svg|ttf|woff|woff2 后缀的字体设置 loader
          use: [{
            loader: 'url-loader',
            options: {
              outputPath: 'fonts/', //相对于 output.path 的输出目录
              limit: 4*1024 //大于此数值依旧用 file-loader处理，打包到 fonts 里面，小于此数值的转为 base64，以减少文件请求次数
            }
          }]
        }
      ]
    },
    ...env.production ? require('./config/webpack.production.config') : require('./config/webpack.development.config')
  }
}

5.1.2 设置 webpack 的 mode ，来决定 webpack 的优化级别。

mode 有三种模式：

none: 不优化
development: 输出调试信息
production: 最高优化，启用压缩，忽略错误

webpack.production.config 文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.min.js' //name为对应入口文件的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
        // 打包输出HTML
        title: 'New HTML', //打包后生成 html 的 title html模板时不生效
        minify: {
            // 压缩 HTML 文件
            removeComments: true, // 移除 HTML 中的注释
            collapseWhitespace: true, // 删除空白符与换行符
            minifyCSS: true // 压缩内联 css
        },
        filename: 'index.html', // 生成后的文件名
        template: 'index.ejs' // 根据此模版生成 HTML 文件
        }),
        // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
        new CleanWebpackPlugin()
    ]
}

webpack.development.config 文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
    mode: 'development',
    output: {
      filename: 'main.js' //name为对应入口文件的文件名
    },
    //编译前文件调试
    devtool: "source-map",
    plugins: [
      new HtmlWebpackPlugin({
        // 打包输出HTML
        title: 'New HTML', //打包后生成 html 的 title
        minify: {
          // 压缩 HTML 文件
          removeComments: true, // 移除 HTML 中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          minifyCSS: true // 压缩内联 css
        },
        filename: 'index.html', // 生成后的文件名
        template: 'index.ejs' // 根据此模版生成 HTML 文件
      }),
      new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ],
}

结尾彩蛋

欢迎关注我的公众号-前端之阶，即时获取更多前端技术，还可获取前端大群，里面很多知名互联网前端朋友，前端技术更新太快，不能被落伍淘汰，共同学习，共同进步！