簡單配置webpack自動刷新瀏覽器

文檔地址  http://webpack.github.io/docs/usage.html

首先全局安裝webpack(我這里使用的是淘寶的cnpm)

cnpm install webpack

檢查一下是否安裝完畢，查看版本號

webpack -h

簡歷package.json文件

npm init  一直enter就可以了

然后再本地安裝一次webpack

cnpm install webpack --save-dev

新建webpack.config.js

module.exports = {
     entry: './js/app.js',  //入口文件
     output: {
         path: './build',   //打包好的文件夾
         filename: 'main' //打包好的文件名
     }
 };

 

配置完webpack.config后，目錄需要有一個index.html文件在body內引入/build/main.js

然后就可以設置熱加載了

首先是安裝webpack-dev-server模塊

cnpm install webpack-dev-server --save-dev

執行開啟自動刷新

webpack && webpack-dev-server --hot --inline

打開瀏覽器輸入 localhost:8080 修改app.js就可以不用刷新看到你做的修改了

 

升級版

在package.json 中的script中加入字段

"start": "webpack && webpack-dev-server --hot --inline"

現在直接輸入 npm start 就可以實現同樣效果了