搭建简易webpack dev server,本地开发自动刷新开发环境页面

const { resolve } = require("path")
// webpack自己创建一个空的html模板，并把js进行引入
const HtmlWebpackPlugin = require("html-webpack-plugin")
/**
 * entry:入口起点
 *         1. string   './src/index.js'
 *             打包形成一个chunck   输出一个bundle文件
 *             此时chunck的名称默认是main
 *         2. array  ['./src/index.js','./src/add.js']
 *             多入口
 *             所有入口文件最终会打包形成一个chunck   输出去只有一个bundle文件
 *             -------> 适用场景：  只有再HMR功能中让html热更新生效~
 *         3. object
 *             多入口
 *             { index: './src/index.js', add: './src/add.js' }
 *             有几个入口文件就形成几个chunck，输出几个bundle文件
 *             此时chunck的名称是key
 *             ---------> 适用场景：多入口
 *         特殊用法
 *             dll
 *              { index: ['./src/index.js','./src/add.js'], add: './src/add.js' }
 */
module.exports = {
    entry: ['./src/index.js', './src/add.js'],
    output: {
        // 输出文件目录（将来所有输出资源的公共目录）
        path: resolve(__dirname, './dist'),
        
    },
    plugins: [new HtmlWebpackPlugin()],

    devServer: {
        contentBase: resolve(__dirname, "dist"),
        port: 9000,
        open: true,
        compress: true,
    },
    mode: 'development'
}

遇到的问题：

　　由于webpack已经升级到5了，我本地的webpack还是4对应的webpack-cli是3.3.12，所以在运行npx webpack-dev-server的时候报错，查看原因是应为不兼容

package.json文件中

    "devDependencies": {
        "html-webpack-plugin": "^4.5.1",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12"
    },
    "dependencies": {
        "webpack-dev-server": "^3.11.0"
    }

版本一定要配对；参考文章：https://www.cnblogs.com/rapale/p/13863511.html

 

启动本地服务：

npx webpack-dev-server