webpack-dev-server 和html-webpack-plugin 配置分析

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    plugins: [
      /* html插件比较有意思的是会把模板位置的文件复制到内存里,同时在网页src引入bundle.js文件
      html文件的位置也是默认浏览器根目录,即是http://localhost */
        new HtmlWebpackPlugin({
          title: 'index',
          filename:'index.html', 
          template: './src/index.html'
        })
      ],
    entry: {
        index: './src/index.js'
      },
    devServer: {
      /* 1. static 属性的含义是:static 的路径下所有内容发布到服务器.
      2.同事打包bundle.js在虚拟内存中,无论如何改变static的值,bundle.js访问的方式不变,
      直接通过localhost直接访问*/
        static: path.join(__dirname,'dist'),
        // static: './',
        compress: true,
        port: 80,
      },
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname, 'dist'),
        clean: true,
    }
}