webpack4.x配置04：配置开发服务

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

开发服务

此前，我们要浏览页面都是在项目文件夹中，直接点击要浏览的文件，在浏览器中打开浏览，但是这种浏览方式还是太麻烦，而且，如果是移动端开发，想在手机上预览效果，就没有办法了，开了服务，我们可以通过本地服务浏览文件，也能在手机预览开发效果。

这就需要用到 webpack-dev-server 插件了

安装 webpack-dev-server

npm install webpack-dev-server -g
npm install webpack-dev-server -D

看一下 webpack-dev-server 的基本配置项

• color（CLI only） console 中打印彩色日志
• historyApiFallback 任意的404响应都被替代为 index.html。启用该配置后，项目中任何找不到的链接都会被强制链接到 index.html 页面
• host 指定一个host,默认是localhost。如果你希望服务器外部可以访问，指定如下：host: “0.0.0.0”。比如你用手机通过IP访问,也可设置为本机局域网IP
• hot 启用 Webpack 的模块热替换特性。和 react 的热替换搭配使用
• port 配置要监听的端口。默认就是8080端口,可自行修改
• progress（CLI only） 将编译进度输出到控制台。
• overlay 在浏览页面输出报错信息

根据以上配置项，修改 webpack.dev.conf.js 文件，增加 webpack-dev-server 的配置。

// 开发服务配置项
devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    host: '0.0.0.0',
    overlay:true
}

color 和 progress 可以写在开启服务的命令行中

修改 package.json 文件，scripts 中增加以下命令：

"start": "webpack-dev-server --config webpack.dev.conf.js --color --progress"

执行 npm start 浏览器打开 http://localhost:8080 查看效果，页面正常显示

此时，是可以把 dist 整个目录都删除掉的，因为开启服务后，打开的页面以及相关的一切文件，都是存储在缓存中的，用的不是生成的 dist 文件夹内的文件

删除 dist 目录，再次执行命令 npm start 浏览器打开 http://localhost:8080 页面依然能正常显示~

当然，此时是没办法在手机上预览效果的，那需要别的一些插件~

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

以下为本文已涉及到的配置文件的当前详细信息

1. webpack.dev.conf.js 文件现在的配置信息情况：

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

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: '0.0.0.0',
        overlay:true,
    }
}