webpack4.x - 安装webpack-dev-server

一.问题描述

在webpack4.x - 创建项目,打包第一个js文件这篇文章中,我们成功利用webpack实现了项目中js文件的打包操作,但是细心的同学可能发现了我们每一次修改相关代码,都要通过npm run build命令重新打包我们的bundle.js文件,这样我们才能看到效果,因此webpack-dev-server应运而生;

二.配置webpack-dev-server

2.1 修改webpack.config.js

/**
 * Created by Milogenius on 2020/1/5.
 */
const path = require('path')

let config = {
    mode: 'none',
    entry: {
        main: path.join(__dirname, './src/main.js')
    },
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, './dist')
    },
      // 开启devServer
    devServer: {
        open: true,//自动打开浏览器
        port: 3306,//运行端口号
        contentBase: 'src',//托管目录
        hot: true//启用热更新
    }
}


module.exports = config

2.2 修改package.json

  "scripts": {
    "build": "webpack --config webpack.config.js --progress --colors",
     //新增
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

三.安装webpack-dev-server

npm i webpack-dev-server -D

四.测试

我们运行npm run dev显示成功编译,并且我们的项目已经被托管到web服务,可以通过http://localhost:8081访问,说明我们安装成功,接下来我们修改main.js,保存修改时候,控制台会显示再次编译;如果我们向结束自动编译,可以ctrl+c终止即可;

现在,我们访问http://localhost:8081,成功进入页面。点击进入src,发现页面并不是我们想要的效果;

其实,通过webpack-dev-server编译的bundle.js文件默认在项目根路径下,而不是我们之前配置的dist目录下;修改index.html的引入路径;

   <script src="../bundle.js"></script>

再次访问,发现正常显示,但是我们并没有在上图中发现bundle.js文件。因为默认编译完的文件会放到内存中，并没有写入到硬盘中，所以我们看不到；

五.小结

本篇文章我们主要讲如何集成webpack-dev-server,关于更多用法大家可以参考官网