Webpack 热加载和一些有用的命令行
打赏作者

Webpack 热加载和一些有用的命令行

Webpack 教程 >> Webpack 热加载和一些有用的命令行 视频发布于 2016-11-01

Webpack hot reload (热加载)我个人觉得这是一个非常非常 Cool 的事情,基本上就是想实时同步刷新代码,对我们开发来说,是一种完美的体验。在这个视频当中,我们来学习怎么使用 Webpack 的热加载(hot reload)和介绍使用一些非常有用的 Webpack 命令行。
yh4494

非常支持,我之前自己配置webpack的环境配置花了很多时间,最后还是用了vue-cli来做。希望jelly你能带来更多的精彩视频!

gaofei

安装webpack-dev-server后,执行webpack-dev-server --inline --hot 后出现错误
ERROR in multi main
Module not found: Error: Cannot resolve module ‘webpack/hot/dev-server’ in /Users/fred/mylesson/webpack-learning
@ multi main
怎么解决

JellyBool 回复 gaofei

这个感觉是因为你没安装完毕?看看你的 webpack 配置和package.json?

lilu 回复 JellyBool
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-runtime": "^6.18.0",
    "css-loader": "^0.25.0",
    "jquery": "^3.1.1",
    "style-loader": "^0.13.1",
    "vue": "^2.0.5",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.8.1",
    "vue-style-loader": "^1.0.0",
    "webpack-dev-server": "^1.16.2"
  }
}
lilu 回复 gaofei

我也遇到同样的问题

JellyBool 回复 lilu

你是怎么安装 dev-server 的?试着这样试试:

npm install webpack --save-dev
liudong0763 回复 JellyBool

老师,我也是遇到一样的报错

JellyBool 回复 liudong0763

删掉 node_modules 目录,再来一次

liudong0763 回复 JellyBool

试过了也不行,555

JellyBool 回复 liudong0763

这就很尴尬了啊,试试这样:
HOME 目录执行

npm install webpack

再在项目目录:

npm install webpack --save-dev
xiguage 回复 JellyBool

npm install webpack webpack-dev-server --save-dev 这样 然后执行 node_modules/.bin/webpack-dev-server --inline --hot 就可以了

Yawenina 回复 liudong0763

试一试执行这个命令呢:
node_modules/.bin/webpack-dev-server --inline --hot

liudong0763 回复 Yawenina

好的,我试试,非常感谢大神的解答

xiguage 回复 gaofei

我是window系统,也遇到这错误

liudong0763

老师在 Laravel中如何使用 webpack?

JellyBool 回复 liudong0763

默认就可以使用 webpack 啊。你看 5.3 的 passport 那两个视频就是直接使用 webpack,laravel 的 elixir 包含了 webpack

liudong0763 回复 JellyBool

那 webpack -w 的命令怎么实现?

JellyBool 回复 liudong0763

你在命令行使用 gulp watch 应该就可以了吧

chenxin
zsh: command not found: webpack-dev-server

不会吧。。。安装了居然不识别

JellyBool 回复 chenxin

你是怎么安装的?

chenxin 回复 JellyBool
npm install webpack-dev-server -g

google了一下这样安装就可以了,哈哈!

xshaitt 回复 chenxin
node_modules/.bin/webpack-dev-server --inline --hot
Imfan
☁  webpack-test [master] ⚡ node_modules/.bin/webpack-dev-server --inline --hot
module.js:472
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/fanlingang/www/test/vue/webpack-test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:46:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

这是因为什么呢。。。

JellyBool 回复 Imfan

这个 module 没有 webpack/bin/config-yargs

装一下,或者删了 node_modules ,再 npm install

Devil-MCry

这里热加载不成功!!呜呜呜!

jonise92 回复 Devil-MCry

使用硬路径 比如 E:/demo/node_modules/.bin/webpack-dev-server --inline --hot 根据自己的安装目录更改目录 这是npm 是局部安装

seashell1992

如果webpack-dev-server 不成功的话,应该是要局部安装下webpack,npm install webpack --save-dev,如果是全局模式安装的的话,webpack-dev-server是不支持的

Cherry

新版的视频播放器 用chrome经常
”无法播放该视频,请换一个支持HTML5视频功能的浏览器“,
暂停的时候复现比较频繁,
刷新一下就好了。
win10 chrome 58.0.3029.110 (64-bit)

JellyBool 回复 Cherry

这个应该是 cdn 的问题。。。。

wh9281

webpack.config.js里面"webpack-dev-server": "^2.5.1"这个也安装好了的额。为啥webpack-dev-server --inline --hot提示不是内部命令呢

JellyBool 回复 wh9281

是否有全局安装?

wh9281 回复 JellyBool

webpack全局安装的。这个 webpack-dev-server 按照视频 安装的 npm install webpack-dev-server --save-dev

JellyBool 回复 wh9281

这样的话,我觉得应该是环境变量没配置好吧,你是 windows 环境?试试这样:

node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot
HideStone

虽然没有报错,但是热加载没有成功,修改文件后,并没有刷新和重新打包

HideStone

为何改变html里面的内容没有自动进行热更新呢

JellyBool 回复 HideStone

这样我也不知道的啊。。。

carsonlius 回复 JellyBool

这个问题我也遇到 webpack-dev-server 打包的bundle.js文件是在内存中 而不是webpack.config.js里面生成
的bundle.js文件
所以index.html 直接使用根目录的bundle.js <script src="bundle.js"></script>

carsonlius
  1. 安装 npm install webpack-dev-server -g --save-dev
  1. 热加载 webpack-dev-server --inline --hot --mode development
  2. 注意 index.html 引用的bundle.js一定要是跟目录下的bundle.js
MyPuppet

###webpack4中预加载不成功也无报错解决办法:
安装过程:
npm i webpack-dev-server webpack-dev-middleware webpack-hot-middleware -D
配置
webpack.config.js

const webpack = require('webpack');
......
    plugins: [
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        publicPath: '/dist/',//你的bundle.js文件夹
        host: 'localhost',
        port: '8080',
        open: true,//自动拉起浏览器
        hot: true//热加载
    },

运行命令
node_modules/.bin/webpack-dev-server --mode development

mklin47 回复 MyPuppet

“webpack”: “^4.29.0”,
“webpack-cli”: “^3.2.1”,
“webpack-dev-server”: “^3.1.14”,
我的webpack版本比较高,现在学习这个遇到很多坑,你这边的配置热加载刚好解决了我这边的问题,赞个