webpack 完整配置檔案 Webpack2完整踩坑教程(三)
轉自:http://blog.csdn.net/alanfancy/article/details/64444558
Webpack的核心哲學思想 1.一切都是模組——就像JS檔案可以視作“模組”一樣,其他所有的一切(CSS,圖片,HTML)都可以被視作模組,通過require載入。。 2.模組載入器會把所有的模組最終打包生成一個巨大的“bundle.js”檔案,並且會一直不停進行載入!所以Webpack通過大量的特性去分割你的程式碼,生成多個“bundle”片段,並且非同步地載入專案的不同部分。
三.Webpack-dev-server
Webpack的載入器有兩個介面重要的介面:
webpack cli ——預設介面(和webpack一起安裝了,就是npm run build,生產版本所使用的)
Webpack-dev-server ——通過cli和配置檔案(webpack.config.js)的配置項來控制webpack的打包動作,一般為開發版本所用
1.安裝webpack-dev-server : npm install webpack-dev-server –save-dev
2.建立webpack.config.js檔案,並新增基本配置var path = require('path'); // 匯入路徑包
module.exports={ entry:'./src/index.js',//入口檔案 output:{ path:path.join(__dirname,'dist'),// 指定打包之後的資料夾 publicPath:'/dist/',// 指定資原始檔引用的目錄 filename:'bundle.js'// 指定打包為一個檔案 bundle.js }}
打包所需的路徑都已在webpack.config.js配置後,package.json的build則去掉路徑,並新增webpack-dev-server啟動:”dev”:”webpack-dev-server”
...
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rimraf dist && webpack --watch", "dev": "webpack-dev-server" }, ...
執行npm run dev啟動webpack-dev-server進行打包,在瀏覽器輸入localhost:8080直接開啟,沒毛病。
修改messages.json的內容,儲存,可以看到瀏覽器實時更新了資料。在實際開發中,我們往往有以下需求:
1、每次修改程式碼後,webpack可以自動重新打包,webpack-dev-server有兩個用於自動重新整理模式:iframe和inline
2、瀏覽器可以響應程式碼變化並自動重新整理(hot)
·iframe 頁面被巢狀在一個iframe下,程式碼發生改動後,iframe會重新載入 使用此模式無需額外配置,只需訪問http://localhost:8080/webpack-dev-server/index.html即可,顯然webpack-dev-server預設的模式就是iframe。
·inline 為整個頁面提供了“Live reloading”功能。webpack官方提供的一個小型Express伺服器。
·hot 提供了“模組熱過載”功能,它會嘗試僅僅更新元件被改變的部分(而不是整個頁面)。會嘗試先去通過 HMR 更新然後可能嘗試重新整理整個頁面。只需要加上一個 webpack/hot/dev-server entry point,並且在 dev-server 呼叫時加上引數 –hot。如果我們把inline和hot這兩個選項都寫上,那麼當檔案被改動時,webpack-dev-server會先嚐試HMR,如果這不管用,它就會重新載入整個頁面。
hot(HMR)和inline使用有兩種方式:CLI和Node.js Api
1>CLI方式比較簡單,只需修改package.json中scripts配置,新增 –inline –hot
“dev”: “webpack-dev-server –inline –hot”
2>Node.js Api方式
1.在主目錄下,新建dev-server.js檔案
var WebpackDevServer=require('webpack-dev-server');
var webpack=require('webpack'); var config=require('./webpack.config'); var path=require('path'); var compiler=webpack(config); var server=new WebpackDevServer(compiler,{//建立伺服器例項 hot:true,//HMR配置 filename:config.output.filename, publicPath:config.output.publicPath,//必填 stats:{ colors:true } }); server.listen(8080,'localhost',function(){});
2.修改webpack.config.js配置
var path=require('path');// 匯入路徑包
var webpack=require('webpack'); module.exports={ entry:[//入口檔案 './src/index.js', 'webpack/hot/dev-server',//呼叫熱過載 hot 'webpack-dev-server/client?http://localhost:8080'//新增webpack-dev-server客戶端 ], plugins:[ new webpack.HotModuleReplacementPlugin()//全域性開啟熱程式碼替換 ], output:{ path:path.join(__dirname,'dist'),// 指定打包之後的資料夾 publicPath:'/dist/',// 指定資原始檔引用的目錄 filename:'bundle.js'// 指定打包為一個檔案 bundle.js } }
3.在index.js最底下新增hot呼叫
if(module.hot){//啟用熱過載 module.hot.accept();}
4.修改package.json啟動方式
...
"scripts": { "build": "rimraf dist && webpack --watch", "dev": "node dev-server.js" }, ...
5.執行npm run dev ,在瀏覽器輸入localhost:8080檢視,然後嘗試修改index.js或messages.json的資料,儲存,再看瀏覽器,是不是自動重新整理了?
就愛閱讀www.92to.com網友整理上傳,為您提供最全的知識大全,期待您的分享,轉載請註明出處。