五：获取ip并默认浏览器打开项目预览

默认浏览器打开项目预览
在此之前，在浏览器打开项目，我们都需要，到文件夹去找 dist/index.html 直接打开，启动服务后，需要复制 http://localhost:8080 到浏览器打开
在这里，可以省去这些步骤，在启动服务后，直接自动在默认浏览器打开项目预览

1：安装相关插件

npm install opn chalk -D

2：更新 webpack.dev.conf.js 文件，文件顶部先引入插件

const open = require('opn');//打开浏览器
const chalk = require('chalk');// 改变命令行中输出日志颜色插件

3：修改 webpack.dev.conf.js 文件的 devServer 配置项

devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    host: '0.0.0.0',
    overlay:true,
    after() {
        open('http://localhost:' + this.port)
        .then(() => {
            console.log(chalk.cyan('成功打开链接： http://localhost:' + this.port));
        })
        .catch(err => {
            console.log(chalk.red(err));
        });
    }
}

执行命令 npm start 查看效果，页面已经可以自动在浏览器打开~

4：获取局域网IP

安装相关插件:
npm install ip -D

移动端开发时，当需要在手机上查看效果时，需要通过局域网 IP 来访问网站，此时可以通过此插件，智能获取本机的局域网 ip，即使在公司或在家开发同一项目，都可智能获取本机的局域网ip，而不用分别设置
更新 webpack.dev.conf.js 文件，文件顶部先引入该插件
const ip = require('ip').address();

然后修改 webpack.dev.conf.js 文件的 devServer 配置项

devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    host: ip,
    overlay:true,
    after() {
        open(`http://${ip}:${this.port}`)
        .then(() => {
            console.log(chalk.cyan(`成功打开链接： http://${ip}:${this.port}`));
        })
        .catch(err => {
            console.log(chalk.red(err));
        });;
    }
}
此处需要注意的是：因为引入了变量，open(`http://${ip}:${this.port}`) 以及 console.log(chalk.cyan(`成功打开链接： http://${ip}:${this.port}`));, 使用的都是反引号，而不不能再是单引号或者双引号，反引号即键盘 tab 键上方的那个键位，需要是英文格式。

再次执行命令 npm start 浏览器打开的页面地址就是本机局域网 ip 地址以及设置的端口号了~
此时使用手机在浏览器中，输入该网址，就可以在手机上看到项目网页了~

有人可能已经发现了，这里我们使用了箭头函数，这是 es6 的新语法，我们还没有配置 babel，为什么会没报错呢？ 这个我也没找到相关文章，但是可以肯定的是，webpack4.x 已经支持了 es6 新语法，我们可以做个测试，webpack4.x在打包时是没办法自己转编译es6语法的，打包时会报错，所以后期还需要配置 babel

修改 src/index.js 文件的内容，如下：

var func = str => {
    document.getElementById('app').innerHTML = str;
};
func('我现在在使用 es6 新语法-箭头函数!');
页面依然能正常显示，说明页面是可以被正常编译的~

5：相关文件配置信息更新情况

以下为本文已涉及到的配置文件的当前详细信息
webpack.dev.conf.js 文件现在的配置信息情况：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const open = require('opn');//打开浏览器
const chalk = require('chalk');// 改变命令行中输出日志颜色插件
const ip = require('ip').address();

module.exports = {
    // 入口文件配置项
    entry: path.resolve(__dirname, 'src/index.js'),
    // 输出文件配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js',
        publicPath: ""
    },
    // webpack4.x 环境配置项
    mode:"development",
    // 插件配置项
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',//输出文件的名称
            template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
            title:'webpack-主页',//配置生成页面的标题
        }),
    ],
    // 开发服务配置项
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, 'dist'),
        historyApiFallback: true,
        host: ip,
        overlay:true,
        after(){
            open(`http://${ip}:${this.port}`)
            .then(() => {
                console.log(chalk.cyan(`http://${ip}:${this.port} 已成功打开`));
            })
            .catch(err => {
                console.log(chalk.red(err));
            });
        }
    }
}