Webpack，web：網(wǎng)絡(luò)，pack：打包
webpack.wuhaolin.cn是一個介紹webpack的網(wǎng)站，這個網(wǎng)站的優(yōu)勢是每節(jié)內(nèi)容都有對應(yīng)的源碼，內(nèi)容也容易理解，學(xué)習(xí)成本低，第1章是大致給你介紹一下webpack，后面內(nèi)容是具體細(xì)化
學(xué)習(xí)這個網(wǎng)站的webpack內(nèi)容時，先翻到每節(jié)底部，如果有源碼，先下載源碼，然后看這節(jié)的內(nèi)容，最后安裝需要的npm包，記住，我們的包的版本要跟網(wǎng)站上提供的源碼里的版本一致，否則可能會報錯
webpack報錯原因主要是版本不兼容
webpack3.8.1在遇到css-loader?minimize會報錯，需要去掉?minimize；而webpack3.4.0不會報錯
extract-text-webpack-plugin，這個插件在webpack4中不支持
如果你用的是webstorm進(jìn)行開發(fā)，要在項目里安裝node_modules了，要給node_modules的外面一層文件夾右鍵--》Mark Directory As--》Excluded，如果不做這一步的話，電腦會卡死
安裝webpack-dev-server以后，即使是全局安裝，仍然不能使用webpack-dev-server命令，會報錯：“The CLI moved into a separate package: webpack-cli? ? ? Please install 'webpack-cli' in addition to webpack itself to use the CLI? -> When using npm: npm i -D webpack-cli”，就按照報錯信息來，運行npm i -D webpack-cli來安裝webpack-cli，但是推薦用cnpm，因為速度更快，但是安裝以后再運行‘webpack-dev-server’，報了另外一個錯誤：“throw new Error('invalid "instanceof" keyword value ' + c)”，最后我下載了1.6節(jié)頁面最底部的源碼，刪除node_modules，用網(wǎng)站的源碼，然后cnpm install以后，就正常運行了
1.6節(jié)說讓你執(zhí)行‘webpack-dev-server’，你不要直接在cmd命令行上執(zhí)行‘webpack-dev-server’，要要把命令行放在package.json的
"scripts": {
? ? "build": "webpack-dev-server --hot --devtool source-map"
? }里，運行cnpm run build
構(gòu)建完畢以后，出現(xiàn)的.map后綴名的文件，就是sourcemap文件
entry: ['./main.js', './branch.js']，entry如果是一個數(shù)組，里面有2個js，就會從左往右執(zhí)行
安裝node-sass以后，不能直接執(zhí)行‘node-sass main.scss main.css’，要把‘node-sass main.scss main.css’放在npm script里（比如"node-sass" : "node-sass main.scss main.css"），再執(zhí)行‘cnpm run node-sass’就可以了
問：怎么記憶css-loader/style-loader呢？
答：css-loader的核心是css，也就是處理css代碼的；style-loader的核心是style，是把css插入到<style>標(biāo)簽里的
devtoolModuleFilenameTemplate：
如果想提升項目的性能，可以在webpack.config.js里module.exports下面設(shè)置performance: {
? ? hints: 'warning'
? }，這樣，控制臺會輸入一些幫助你提高性能的建議：
問：哪些插件適合全局安裝？
答：希望整個電腦的版本都一致的，就全局安裝，比如node-sass；如果項目1里需要用這個版本，項目2需要用另外一個版本，那么這個插件就適合局部安裝，比如webpack
問：哪些模塊安裝時調(diào)用‘-S’，哪些模塊安裝時調(diào)用‘-D’？
答：‘-S’是把插件放到package.json的dependencies里，‘-D’是把插件放在package.json的devDependencies里，dependencies放生產(chǎn)環(huán)境需要的插件（比如Vue），devDependencies放只需要開發(fā)環(huán)境需要而生產(chǎn)環(huán)境不需要的插件（比如babel-core）
問：復(fù)制網(wǎng)上的一句命令‘npm install –save-dev sass-loader node-sass’，返回給我cnpm的版本，這是怎么回事？
答：原來是–save-dev前面需要2個‘-’，改成‘npm install -–save-dev sass-loader node-sass’
?運行‘cnpm install sass-loader node-sass -S’報錯，然后換成‘cnpm i -D node-sass sass-loader’就安裝成功了，我猜測可能是因為sass-loader依賴node-sass，所以如果前后順序換了就安裝失敗了，應(yīng)該不是‘-S’改成‘-D’所以成功的
在main.js里使用require('style-loader!css-loader?minimize!./main.css');，再在webpack.config.js的module.rules的css文件use: ExtractTextPlugin.extract({
? ? ? ? ? ? ? ? ? ? // 轉(zhuǎn)換 .css 文件需要使用的 Loader
? ? ? ? ? ? ? ? ? ? use: ['css-loader'],
? ? ? ? ? ? ? ? }),
會生成css文件，但是后面會報錯，
把require('style-loader!css-loader?minimize!./main.css');改成require('./main.css');就不報錯了，估計是require里用了一種方式處理css文件，另外又用了一種loader進(jìn)行處理，2種方式同時使用會沖突
如果entry是一個對象，里面有2個入口，那么，output不能放在同一個文件里，也就是說，output里的filename不能寫死，比如如果寫死為'bundle.js'，會報錯：Conflict: Multiple assets emit to the same filename bundle.js
頁面里寫require('vue')；node就會去node_modules里找vue
問：為什么webpack.config.js和index.html修改了內(nèi)容，項目監(jiān)測不到？
答：http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-1Entry.html講到了‘entry是配置模塊的入口，可抽象成輸入，Webpack 執(zhí)行構(gòu)建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊?！鴐ian.js是找不到webpack.config.js和index.html的，所以這2給文件即使修改了，頁面也不會更新
問：3.9節(jié)的demo里有這句npm script‘"build": "NODE_ENV=production webpack"’，結(jié)果報錯了‘'NODE_ENV' 不是內(nèi)部或外部命令，也不是可運行的程序 或批處理文件?！趺唇鉀Q？
答：改成‘"build": "set NODE_ENV=production && webpack"’，原文鏈接：http://www.itdecent.cn/p/d0ea266c8e14
/\.jsx?$/，這表示匹配js的后綴文件或者jsx的后綴文件
關(guān)于‘4-1 縮小文件搜索范圍’的‘優(yōu)化 loader 配置’的這個示例，我的理解是：減少文件夾層數(shù)，這樣可以減少讓node所檢查的文件的嵌套層數(shù)，類似于js的for循環(huán)層數(shù)減少了，性能就提高了
3.15節(jié)這里出現(xiàn)了‘rsync dist’，以下是我從http://bbs.chinaunix.net/thread-3681210-1-1.html里摘錄的一段話："rsync是linux系統(tǒng)默認(rèn)帶有的命令，window下沒有的。要在windows上安裝rsync還挺麻煩，需要用到cygwin 之類的在windows上模擬linux環(huán)境才能安裝rsync吧"，實際開發(fā)項目里，可以直接把dist文件夾放在服務(wù)器上就行了，不用這么麻煩
關(guān)于3.16這節(jié)內(nèi)容，我覺得webstorm已經(jīng)可以對代碼進(jìn)行語法檢查了，就沒有必要再安裝這些插件了
問：3.19這節(jié)，在template.html這里引入圖片，即使用了file-loader進(jìn)行解析，還是沒有效果，為什么？
答：因為main.js獲取不到template.html的代碼，如果想在html里讓圖片被插件解析，可以在js里引入圖片，然后把圖片插入到html里
問：3.19這節(jié)的demo里，webpack.config.js里new WebPlugin的requires的值為什么是['main']？
答：因為entry的值是一個對象，屬性名就是'main'，你也可以根據(jù)自己喜好改成其他值，但是entry值的屬性名必須和new WebPlugin的requires值相同
問：為什么template.html里的script標(biāo)簽的src屬性值是app？
答：因為webpack.config.js里的這句話，
entry: {
? ? app: './main.js'// app 的 JavaScript 執(zhí)行入口文件
? },
如果你把這里的app改成app2，就需要把template.html里的script標(biāo)簽的src屬性值改成app2了
package.json的dependencies和devDependencies是按照英文字母的順序進(jìn)行排序的，如果想詳細(xì)了解package.json文件中dependencies和devDependencies的區(qū)別，請閱讀：https://www.cnblogs.com/xumqfaith/p/8073035.html
vue-router按需加載組件的3種方式：vue異步組件、es提案的import()、webpack的require.ensure()：https://segmentfault.com/a/1190000011519350
