webpack学习（三）之webpack-dev-server不能自动刷新问题

使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题；寻找多方答案后明白了一些；

下面有一些需要注意的点：

1.webpack-dev-server并不能读取你的webpack.config.js的配置output！！

你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用

2.webpack-dev-server打包生产的文件并不会添加在你的项目目录中！！

它默认打包的文件名是bundle.js，不会真的出现在你的项目目录中，据推测应该是保存在自己的环境中

自动刷新的配置方法（inline模式）：

我习惯的做法是在项目的package.json里面添加

 "scripts": {
     "start": "webpack-dev-server --inline --content-base ."
  }

或者

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "webpack-dev-server --env development --inline --open --host 127.0.0.1 --port 8090 --progress --colors --content-base ./"
  },

这样通过npm start命令就能启动 inline模式了，当然也可以具体的输入webpack-dev-server命令

关键的是你的index.html也就是你的项目入口的html文件里面引用这个bundle.js文件需要直接引用根目录下面的！

1
2
3
4


<body>

    <div id="app"></div>

    <script type="text/javascript" src="bundle.js"></script>

</body>

不能引用你webpack配置的bundle.js文件目录，webpack配置的这个bundle.js文件，只有在你手动打包webpack之后才会改变！

总结下就是：webpack里面配置的bundle.js需要手动打包才会变化目录可以由你自己指定！webpack-dev-server自动检测变化自动打包的是开发环境下的bundle.js，打包路径由你的contentBase决定！两个文件是不一样的

package.json-配置

webpack-dev-server热更新npm命令如下：

"dev": "webpack-dev-server --env development --inline --open --host 127.0.0.1 --port 8090 --progress --colors --content-base ./"

--open 是否打开浏览器

--host 配置ip

--port 配置端口号

--progress 是否显示打包进程

--colors

--content-base 运行启动指定目录下的index.html页面,只能是index.html为启动页面

案例图片：

Webpack-dev-server结合后端服务器的热替换配置

Webpack是一个模块加载器，这里所谓模块其实就是项目中用到javascript、coffeescript、css、less、jsx以及图片等等资源，Webpack采用不同的loader将这些资源加载后打包，然后输出打包后的文件，打包后的文件可以是一个或多个js文件，也可以根据需要分别打包，比如将所有css文件单独输出。下图可以比较直观的说明webpack是做什么的。

作者：Bing573
链接：https://www.jianshu.com/p/8adf4c2bfa51
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

更多信息可以参考webpack的官方网站

Webpack有一个很实用的功能叫做热替换（Hot-replace），尤其是结合React Hot Loader插件，开发过程中都不需要刷新浏览器，任何前端代码的更改都会实时的在浏览器中表现出来。

首先需要安装Webpack-dev-server,一个轻量的node.js express服务器。

npm install webpack-dev-server --save-dev

Webpack-dev-server十分小巧，这里的作用是用来伺服资源文件，不能替代后端的服务器，因此如果你还要进行后端开发，就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)

配置双服务器热替换模式首先需要修改Wepack.config.js的entry条目

entry: [
    'webpack-dev-server/client?http://0.0.0.0:9090',//资源服务器地址
    'webpack/hot/only-dev-server',
    './static/js/entry.coffee'
]

注意，由于要结合了后端服务器，因此不采用
entry: {
app: ['webpack/hot/dev-server', './app/main.js']
}
这种形式。

接下来修改output条目,将publicPath设置为webpack-dev-server服务器下资源目录的绝对路径

output: {
    publicPath: "http://127.0.0.1:9090/static/dist/",
    path: './static/dist/',
    filename: "bundle.js"
}

在Plugins中增加

new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.HotModuleReplacementPlugin()

webpack变量需要在Webpack.config.js的开始处声明

var webpack = require('webpack');

接着中页面文件中插入打包后的资源文件，注意这里要采用资源服务器的绝对路径

<script src="http://127.0.0.1:9090/static/dist/bundle.js"></script>

双服务器的原理其实就是让后端服务器伺服的页面加载资源服务伺服的资源。

如果要实现react的热加载，还需要React Hot Loader插件，

npm install react-hot-loader --save-dev

然后将react-hot loader放在jsx文件loader链的第一位

{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }

最后就是启动Webpack-dev-server服务器，注意这里要采用inline模式，如果采用hot模式会出现错误。--content-base 为资源文件夹。另外如果你想用另一台电脑做调试，需要增加--host参数为开发服务器的IP地址，因为默认只能通过localhost进行方式。如果IP地址经常变动，可以写一个脚本方便每次启动服务器

#!/bin/sh

ip=`awk '/inet / && $2 != "127.0.0.1"{print $2}' <(ifconfig)`

node webpack-dev-server.js --port 9090 --inline --host $ip --content-base static/dist/