Webpack-dev-server

dev-server的安装

$ npm install webpack-dev-server@1.16.5 --save-dev

$ npm install webpack-dev-server@1.16.5 -g

安装之后执行命令：

$ webpack-dev-server

http://localhost:8080/webpack-dev-server/

webpack result is served from / content is served from C:\Users\thinkpad\mmall\doc\mmall-fe Hash: 3817ee18ab9d53cb4ea0 Version: webpack 1.15.0 Time: 9309ms

                Asset       Size  Chunks             Chunk Names

resource/shangyuan.jpg 21.1 kB [emitted]

           js/base.js    4.09 kB       0  [emitted]  common
          js/index.js  392 bytes       1  [emitted]  index
          js/login.js  293 bytes       2  [emitted]  login
        css/index.css   51 bytes       1  [emitted]  index
      view/index.html  536 bytes          [emitted]
      view/login.html  445 bytes          [emitted]

chunk {0} js/base.js (common) 121 bytes [rendered]

   [0] multi common 28 bytes {0} [built]
   [1] ./src/page/common/index.js 46 bytes {0} [built]
   [9] ./src/page/module.js 47 bytes {0} [built]

chunk {1} js/index.js, css/index.css (index) 134 bytes {0} [rendered]

   [0] multi index 28 bytes {1} [built]
   [2] ./src/page/index/index.js 65 bytes {1} [built]
   [3] ./src/page/index/index.css 41 bytes {1} [built]

chunk {2} js/login.js (login) 95 bytes {0} [rendered]

   [0] multi login 28 bytes {2} [built]
  [10] ./src/page/login/index.js 67 bytes {2} [built]

Child html-webpack-plugin for "view\login.html":

   chunk    {0} view/login.html 541 kB [rendered]
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/view/login.html 665 bytes {0     } [built]
       [1] ./~/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/module.js 251 bytes {0} [built]

Child html-webpack-plugin for "view\index.html":

   chunk    {0} view/index.html 541 kB [rendered]
       [0] ./~/html-webpack-plugin/lib/loader.js!./src/view/index.html 661 bytes {0     } [built]
       [1] ./~/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/module.js 251 bytes {0} [built]
       [3] ./~/html-loader!./src/view/layout/html-head.html 140 bytes {0} [built]

Child extract-text-webpack-plugin:

   chunk    {0} extract-text-webpack-plugin-output-filename 2.58 kB [rendered]
       [0] ./~/css-loader!./src/page/index/index.css 247 bytes {0} [built]
       [1] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [2] ./src/image/shangyuan.jpg 68 bytes {0} [built]

webpack: Compiled successfully.

把上面的这个地址用浏览器打开： http://localhost:8080/webpack-dev-server/

然后到dist ->view 会发现不论打开什么页面，地址时终不变，这种非常麻烦

所以我们用incline方法改变：

在webpack.config.js中打包一个client:

 在原先的entry中加入一个条目：

var config = {

   entry: {
       "common":['./src/page/common/index.js',
                 'webpack-dev-server/client?http://localhost:8088/'],
      
   },

然后命令行输入,用inline方式启动webpack-devserver：

$ webpack-dev-server --inline --port 8088

 http://localhost:8088/

webpack result is served from / content is served from C:\Users\thinkpad\mmall\doc\mmall-fe Hash: 64ea1c8027e35235a40a Version: webpack 1.15.0

Time: 1814ms

然后上面这个地址用浏览器打开: http://localhost:8088/

这时输入http://localhost:8088/dist/view/index.html 就可以看到具体的地址。

实时变化

不过这时还有一个问题是在网页中修改，看不到实时变化

看不到的原因是webpack.config.js中还确少一个publicPath：

所以添上它就OK了：

output: {
       path: './dist',
       publicPath : '/dist',
       filename: 'js/[name].js'
   },

这时重启一下

$ webpack-dev-server --inline --port 8088

此时我任意改变一下项目的html、css、js文件，浏览器页面都会同步发生变化，

这就是webpack-dev-server的神奇之处。

现在有一个问题就是 'webpack-dev-server/client?http://localhost:8088/' 这个客户端地址写在了common中，这对上线环境是不起作用的需要修改。

因此我们添加一个环境变量，

//环境变量配置 dev/online var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev'; console.log(WEBPACK_ENV);

然后在webpack.config.js文件module.exports = config;一句前加上：

if('dev' === WEBPACK_ENV){

   config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');

}

并把原先entry中的相应条目删去。

var config = {

   entry: {
       "common":['./src/page/common/index.js',
                 'webpack-dev-server/client?http://localhost:8088/'],
      
   },

然后执行 set $ WEBPACK_ENV = dev && webpack-dev-server --inline --port 8088 即可。

现在我们把命令优化一下，package.json

里的scripts字段，可以执行一些脚本或命令

 "scripts": {
    "dev": "set WEBPACK_ENV = dev && webpack-dev-server --inline --port 8088",
    "dist":"set WEBPACK_ENV = online && webpack -p"
  },

现在我们就可以自定义dev命令

npm run dev 

实际上就是执行的上面的： set $ WEBPACK_ENV = dev && webpack-dev-server --inline --port 8088

有所简化。