这是我参与「第四届青训营 」笔记创作活动的第21天

Webpack插件配置

众所周知，插件可以简化我们的操作，提高效率，接下来我来讲解webpack常用插件安装配置

webpack-dev-server

Webpack有这样一个特性，就是每次更改代码都要打包一次，否则就无法生效，这会给程序员带来很大的困扰，如果我们一保存代码，就可以自动打包岂不完美!!!那怎么实现呢?----要用到第一位主角，webpackdev-server。

安装步骤：

1. 打开VScode的终端，输入 npm install webpack-dev-server -D完成安装
2. 修改package.json中的dev指令如下：

"scripts": {
    "dev": "webpack serve"
  },

此时再运行npm run dev 命令，重新对项目进行打包，几秒种后，在浏览器访问http://localhost:8080 地址，点击src目录，即可查看网页。 此插件会监听对用户的操作进行监听，当用户按下Ctrl+S后，就会自动打包。

html-webpack-plugin

打开localhost:8080后还需要打开src文件夹还是很麻烦，那如何配置能使打开后直接显示页面呢？需要安装html-webpack-plugin插件。

1. 打开终端，输入 npm install html-webpack-plugin -D 指令，安装插件
2. 配置webpack.config.plugin插件如下

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})


module.exports = {
    mode: 'development',
    plugins: [htmlPlugin],
    devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在 http 协议中，如果端口号是 80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },

配置完成后，终端输入npm run dev,即可在http://127.0.0.1:80 看到我们写的页面。

Tips:上述配置中的devServer节点可以配置我们打开的地址极端口号，这里我配置的是127.0.0.1:80,open属性是打包好项目是否自动打开浏览器，他有两个属性，true和false，true是打开。