webpack基礎知識，筆記

webpack是一個打包工具，通常一個js認爲是一個模塊，webpack默認只能識別js文件，若是要打包其餘的如圖片，txt，css等就須要使用loader。loader告訴webpack如何去打包對應的文件

樣式loader：寫css的方法有不少，less，scss，stylus最多見，每一種方法打包的時候須要3個loader，用stylus舉例,它須要3個loader：stylus-loader css-loader stylus-loader,各自做用：

style-loader：把css掛在到dom上

css-loader：處理css

styus-loader：處理styus，轉化爲css

devtool：報錯提示，能夠很清楚的定位到錯誤行數以及該行內的第多少字符。開發環境建議用 cheap-module-eval-source-map ，報錯能夠定位到本地原始(打包以前)代碼的文件以及行數，由於要準肯定位到某個字符會消耗性能，因此建議定位到錯誤的行數就能夠

熱更新：

　　先安裝　　npm install webpack-dev-server -D

　　而後在package.json裏面修改命令　　"dev": "webpack-dev-server"

　　引入webpack　　const webpack = require("webpack");   // 爲了使用hmr

　　添加配置項

　　　　devServer: {

　　　　  contentBase: './dist'，

　　　　  hot: true,

　　　　  hotOnly: true, // hmr不生效的時候也不讓頁面刷新

　　　　}

　　Plungin裏面添加　　new webpack.HotModuleReplacementPlugin()

　　入口文件更新：　　　

　　　　if (module.hot) { 　　　　  module.hot.accept('）// 利用這個方法來更新代碼修改以後對應頁面的修改　　　　}