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,。