webpack入門及踩坑應對指南

webpack的使用

爲何使用webpackcss

1.前端須要工程化html

工程化的概念: 小做坊 -> 流水線
流水線的特色:自動化,模塊化、性能優化

自動化就是命令行操做,一行命令實現多個功能,例如自動監聽變化,自動翻譯源代碼到打包代碼庫裏面前端

2.文件複雜多樣node

  1. css/js/html/img/svg 文件多
  2. css-less-sass-scss-stylus
    js - coffee - es6 - typescript - babel
    html - jade - pug - slim 變化快

將各類文件集合到一塊兒,當作一個模塊,經過模塊來打包,這就是webpack的優點之處。webpack

css loader一直報錯

webpack的配置堪稱玄學,報錯了沒法找到緣由,推薦你這樣作,且建議不參考別人的配置,最好參考官方的配置例子,這樣碰到錯誤還能夠在github的issue上進行提問和尋找解決方法git

  • 你須要首先刪除掉node_modules全部的內容
  • 而後從新安裝依賴npm install
  • 都不行的話,你須要尋找readme的不一樣之處,例如css-loader中,不一樣版本加載的loader也不相同

關於webpack中loader的學習,能夠參加阮一峯的文章和學習demoes6

css loader
githubgithub

奇技淫巧

1.全局安裝VS局部安裝web

全局安裝:npm install -g http-server,安裝目錄爲user/local/.bin/,安裝在全局目錄下typescript

局部安裝:安裝在局部目錄下,./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,絕大多數狀況下是有效的,當報錯信息變化了說明這個解決方法是有效的,

相關文章
相關標籤/搜索