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

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

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

上代码

1.安装webpack-dev-server

 npm  i  -D  webpack-dev-server
  1. 运行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解决了问题的,有知道原因的仁兄请您留言给我。

  1. 运行后控制台会答应出很多东西,列出以下有用的部分
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的搭建。
此时修改了页面一些内容,然后保存了一下,控制台貌似在编译,但是刷新页面并没有什么变化。

  1. 修改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 是否自动打开浏览器
  1. 此时运行 node_modules/.bin/webpack-dev-server
    如果项目没有打包过,会发现不能访问
cann`t get/

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

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

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



       
     
     
  1. 修改一下试试,完美实现了热更新.但是每次输入很长的命令有点不优雅。
    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配置简介-入门集

你可能感兴趣的:(4. webpack4.0 热跟新`webpack-dev-server`的使用)