webpack-dev-server配置

webpack-dev-server 有两种参数配置方法。

配置方法一：

第一种比较简单，也是常用的一种。

在我们的根目录下，有一个 package.json 的文件，我们在这个文件可以进行配置：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

• --open :参数表示自动打开浏览器
• --port 3000:参数表示设置我们启动时候的运行端口
• --contentBase src:参数表示指定托管的根目录。（src 只是个例子，根据自己情况改动）
• --hot:启动热更新

配置方法二：

这一种方法，相对于第一种，比较麻烦。

在根目录下打开 webpack.config.js 文件，在其中进行配置：

const path = require('path');
// 启用热更新的 第2步
const webpack = require('webpack')


//这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露一个 配置对象
module.exports = {
    // 在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'), //入口，表示 要使用 webpack 打包哪个文件
    output: { //输出文件相关的配置
        path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
    },
    devServer: { //这是配置 dev-server 命令参数的第二种形式，相对在package.json中配置来说，这种麻烦
        // --open --port 3000 --contentBase src --hot"
        open: true, //自动打开浏览器
        port: 3000, //设置我们启动时候的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true, //启动热更新 的第1步

    },
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin()  //new 一个热更新的模块对象，这是启用热更新的第3步

    ]

}

// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1.首先，webpack 发现，我们并没有通过命令的形式，给他指定入口和出口
// 2.webpack 就会去 项目的根目录中，查找一个叫做 'webpack.config.js' 的配置文件
// 3.当找到配置文件后，webpack 会解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件
// 中，导出的配置对象
// 4.当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建

注：其中配置 hot 的时候会比较麻烦，共3步，有注释！