4. webpack4.0 热跟新`webpack-dev-server`的使用

devserver 简介 --webpack-dev-server解决的问题

-提供http服务
-监听文件变化、实时刷新
-支持Source Map 方便调试

上代码

1.安装webpack-dev-server

 npm  i  -D  webpack-dev-server

2. 运行webpack-dev-server命令

node_modules/.bin/webpack-dev-server

网上给的webpack-dev-server命令是错误的，不能够正常运行！！！
网上给的webpack-dev-server命令是错误的，不能够正常运行！！！
网上给的webpack-dev-server命令是错误的，不能够正常运行！！！

记住是 node_modules/.bin/webpack-dev-server!!!
记住是 node_modules/.bin/webpack-dev-server!!!
记住是 node_modules/.bin/webpack-dev-server!!!

用webpack-dev-server折腾了半天，报以下错误

webpack-dev-server : 无法将“webpack-dev-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试
一次。
所在位置 行:1 字符: 1
+ webpack-dev-server ./webpack.config.js
+ ~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (webpack-dev-server:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

全局安装npm i -D webpack-dev-server -g报找不到webpack模块，估计webpack也全局安装估计能解决的，但是
与项目的构建相悖，大部分项目我们是只在项目安装webpack的相关依赖。
最后用 node_modules/.bin/webpack-dev-server解决了问题的，有知道原因的仁兄请您留言给我。

3. 运行后控制台会答应出很多东西，列出以下有用的部分

PS E:\demo\webpack\demo1.2-devserver> node_modules/.bin/webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\demo\webpack\demo1.2-devserver
i ｢wdm｣: Hash: 820c714fe24d911744ea

Project is running at http://localhost:8081/的就是告诉我们，我们运行的服务运行在什么地方。
在浏览器打开可以浏览页面。到此已经完成了，简单的devServer的搭建。
此时修改了页面一些内容，然后保存了一下，控制台貌似在编译，但是刷新页面并没有什么变化。

4. 修改webpack.config.js为下面内容。

const path= require ('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { join } = require('path');
module.exports = {
    entry:'./app.js', 
    output: {
    filename:'bundle.js',
    path: path.resolve( __dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]

            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"), //指定生成的地址
        hot: true, // 热更新
        inline:true, //自动更新 
        host: 'localhost',
        port: 8081,
        open: true
    },
    
    plugins:[
        new MiniCssExtractPlugin(
            {
                filename: `[name].css`
            }
        )
    ],
    mode: 'none'
}

跟以往的配置比多了devServer。

1. contentBase 指定运行环境目录
2. hot 热更新， 貌似不配置此项也可以热更新？？？
3. inline 自动更新 貌似不加也可以自动更新？？？
4. host 运行环境地址 如果设置'0.0.0.0'允许其他浏览器访问, localhost 只能本机访问
5. port 运行端口
6. open 是否自动打开浏览器

5. 此时运行 node_modules/.bin/webpack-dev-server
   如果项目没有打包过，会发现不能访问

cann`t get/

没关系，因为现在访问的是dist目录，没有dist当然是找不到了。

6. 创建文件，复制html
   创建dist文件夹 mkdir dist
   进入dist目录 cd dist
   创建index.html文件type > index.html

*当然也可以手动创建，介绍的命令是基于window
修改index.html

7. 修改一下试试，完美实现了热更新.但是每次输入很长的命令有点不优雅。
   npm run dev是比较优雅的操作
   修改package.josn
   script添加一行

    "dev":"node_modules/.bin/webpack-dev-server"

附上package.josn代码

{
  "name": "demo1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./webpack.config.js",
    "dev":"node_modules/.bin/webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.2.2",
    "mini-css-extract-plugin": "^0.11.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

上一篇 3. webpage4.0 mini-css-extract-plugin插件简单介绍
下一篇 5.webpack配置简介-入门集