二、使用webpack-dev-serve 和 HtmlWebp

1、通过 webpack-dev-serve 搭建开发服务

1、安装 webpack-dev-server
- yarn add webpack-dev-server -D

2、配置
 devServer: {
      contentBase: path.join(__dirname, 'dist'),
      port: 8080,
      host: 'localhost',
      compress: true,
      open: true
},

3、通过npx运行开发服务
- npx webpack-dev-server 可以运行开发服务

4、通过添加脚本 简化命令
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
 }

5、此时通过webpack-dev-server搭建的本地服务的根目录实在dist目录下，
此时dist目录没有HTML文件可以打开，因此服务运行后得到的是：
 Cannot GET /

2、HtmlWebpackPlugin 插件的使用

1、作用：
- HtmlWebpackPlugin插件的作用是可以在打包的时候生成一个HTML文件，并
- 将打包完成后的css、js文件自动引入到这个HTML中

2、安装：
- yarn add html-webpack-plugin -D

3、导入
- const HtmlWebpackPlugin = require('html-webpack-plugin')

4、配置 
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html', // 使用的HTML模板
        filename: 'index.html', // 打包生成到的HTML文件名
        minify: {
            removeAttributeQuotes: true, // 打包后去掉双引号
            collapseInlineTagWhitespace: true, // 打包后去空格
        },
        hash:true, // 每次开发打包时，生成的HTML文件带hash
    })
]

- 至此，我们的本地服务就可以搭建完毕

3、此时完整的配置文件

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

module.exports = {
    mode: 'development',
    devtool: 'eval',
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    }, // 入口文件
    output: {
        path: path.join(__dirname, 'dist'), // 输出目录，只能是绝对目录
        filename: '[name].js' // 输出文件名
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 8080,
        host: 'localhost',
        compress: true,
        open: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 使用的HTML模板
            filename: 'index.html', // 打包生成到的HTML文件名
            minify: {
                removeAttributeQuotes: true, // 打包后去掉双引号
                collapseInlineTagWhitespace: true, // 打包后去空格
            },
            hash: true, // 每次开发打包时，生成的HTML文件带hash
        })
    ]
}