webpack的運用
為何運用webpack
1.前端須要工程化
工程化的觀點： 小作坊 -> 流水線
流水線的特性：自動化，模塊化、機能優化
自動化就是敕令行操縱，一行敕令完成多個功用，比方自動監聽變化，自動翻譯源代碼到打包代碼庫內里
2.文件龐雜多樣
- css/js/html/img/svg 文件多
- css-less-sass-scss-stylus
js – coffee – es6 – typescript – babel
html – jade – pug – slim 變化快
將種種文件集合到一同，算作一個模塊，經由過程模塊來打包，這就是webpack的上風的地方。
css loader一向報錯
webpack的設置可謂玄學，報錯了沒法找到緣由，引薦你如許做，且發起不參考他人的設置，最好參考官方的設置例子，如許遇到毛病還能夠在github的issue上舉行發問和尋覓解決方法
- 你須要起首刪撤除
node_modules一切的內容 - 然後重新裝置依靠
npm install - 都不可的話，你須要尋覓
readme的差別的地方，比方css-loader中，差別版本加載的loader也不相同
關於webpack中loader的進修，能夠列入阮一峰的文章和進修demo
奇技淫巧
1.全局裝置VS部分裝置
全局裝置：npm install -g http-server，裝置目次為user/local/.bin/，裝置在全局目次下
部分裝置：裝置在部分目次下，./node_modules/.bin,須要經由過程文件前綴才能夠接見獲得
比方你想用webpack來打包代碼
全局： webpack main.js bundle.js
部分： ./node_modules/.bin/webpack main.js bundle.js
另外，有個簡寫敕令能夠實行webpack敕令，實行部分目次的webpack能夠改成如許npx webpack
2.webpack中的癥結目次
./ 當前目次src source 未經翻譯原始代碼的文件夾dist distribution 宣布代碼文件夾node_modules/vendors 第三方代碼文件夾
3.自動增加前綴的loader autoprefixer
4.報錯提醒找不到某個模塊，cannt find 'module'，就裝置這個模塊npm install module，絕大多數情況下是有用的，當報錯信息變化了申明這個解決方法是有用的，
