webpack 使用心得

最近專案中在使用react/redux/koa做乙個im，打包工具自然選擇了webpack

我主要使用了webpack 的下列功能

webpack 打包編譯js檔案

編譯js檔案支援多入口，版本控制，懶載入

js和樣式檔案都支援熱替換，不需要每個簡單的修改都要重新整理等待

複雜的css sprites功能,支援sass 語法

支援sourcemap，無論在開發還是上線的時候都支援soucemap的功能

webpack的功能不止這些了，而且社群比較活躍，外掛程式開發也挺容易的，真心不錯的乙個工具

---------- 我是華麗的分割線 ----------

webpack最基礎的功能就是編譯js了，由於react最近比較火熱，而且react專案大部分都是通過webpack 進行打包編譯的，導致很多人認為webpack 只是適用於react專案，這是不對的，webpack適用於所有的前端專案

我的專案也在使用react和sass

entry: [

vendorcss: [
config.src.js + '/css/jquery.jcrop.css'
],config.src.js + '/main.jsx'],
vendors:vendors]
},output: ,
module: , ,, 
],noparse: [
path.join(__dirname + '/client/node_modules/jquery/'),
path.join(__dirname + '/client/lib/**')
]}

output.filename 中[name].[chunkhash] 中的chunkhash 並不只是內容變得時候才更新，預設的跟機器名，時間戳都有關係，如果要只是生成檔案內容的md5，可以使用

[webpack-md5-hash] ，也就是在plugins 裡面新增 new webpackmd5hash()

jsx的babel-loader必須放在第一位，如果需要jsx-loader,那麼順序就是

['babel-loader', 'jsx-loader'],否則生成的soucemap **是babel 編譯後的es5 **

支援soucemap的話可以配置devtool 為'#cheap-module-eval-source-map'，devtool有很多種，常見的sourcemap有下面幾個問題

1) sourcemap的**是babel編譯後的，這個主要是因為配置了devtool為eval，cheap-source-map

2) sourcemap 中文亂碼了，這個主要是配置了含有eval的devtool, 比如cheap-module-eval-source-map
因此推薦開發的時候使用的sourcemap：cheap-module-source-map

上線後**會經過uglifyjsplugin進行壓縮，下面是相關配置

new

webpack.optimize.uglifyjsplugin(,
sourcemap:
true
,//這裡的soucemap
mangle:
true
})

new webpack.defineplugin(})

可以在專案中配置一些alias，具體的可以檢視此處，alias可以解決一些模組巢狀層級比較深，相對路徑不好引用的bug

專案編譯後生成的js 如果放到html頁面裡面呢？這裡我自己寫了乙個外掛程式，

使用gulp-template 進行檔案替換。

export

function
buildviewhtml(dev) ))
.pipe(gulp.dest(viewfile));
});}
}

下面的內容是hrm相關的，今天先寫到這裡，後續會補充更多

熱替換(hot module replacement),簡稱hmr，

是說應用可以動態的更新區域性模組**，而不需要重新整理整個頁面

這個在跨平台開發或者較複雜的專案中特別有用，比如我有個層級很深的操作，操作了10多次才進入這個介面，這個時候更改了乙個小功能，如果沒有熱替換，只能重新整理整個頁面，再重複操作10多次才能看到效果，熱替換改變了這一切

frameset 使用心得

欲明白本篇 html徹底剖析 之標記分類，請看 標記一覽 也請先明白圍堵標記與空標記的分別，請看 html概念 框架概念 謂框架便是網頁畫面分成幾個框窗，同時取得多個 url。只需要 即可，面所有框架標記需要放在乙個總起的 html 檔，這個檔案只記錄了該框架如何分割 不會顯示任何資料，所以不必放入...

Access使用心得

今天臨時用access做資料庫，長期用sql server開發習慣了，總結一下現在為止用到的比較大的差異，以後有新的再補了 1 返回字串長度 len s lenb s 前者返回字元數，後者返回位元組數，並且access中text型別字元統一為2位元組，與sql2000不同。2 join的使用 acc...

vmware使用心得

成功在winxp環境中安裝了vista business版本，反之，亦然。可以建立工作組網路連線了，虛擬機器也可以訪問網際網路了。安裝說明 在安裝嚮導中，無論使用哪種網路連線形式，都不影響正確安裝。安裝後，可以編輯本地機和虛擬機器之間的網路連線形式。需要注意三個細節問題 1 網絡卡要設定為 電源啟動...