前端構建之webpack
之前寫了一個前端構建之gulp，一樣的目的寫一個webpack， 內容基本上和gulp一樣，重要用來本身進修紀錄。
為何須要前端構建
不詮釋
本文大抵分為以下幾個內容：
- 範例校驗js代碼（jslint）
- js詮釋器（babel）
- 兼并js代碼（concat）
- 緊縮js代碼（uglify）
- sourcemap
- 範例校驗css代碼(csslint)
- css詮釋器
- 兼并css代碼
- 緊縮css代碼
範例校驗js代碼
1. 用webpack檢測js代碼範例
js檢測東西用來
- 檢測本身寫的js是不是有語法毛病
- 是不是依據我們設定的劃定規矩寫的
經常運用的js檢測東西有jshint、jslint、eslint等， 引薦用eslint。
在webpack中，引薦用eslint這個插件。運用eslint時設置一個.eslintrc文件，用來編寫自定義js劃定規矩。
假如用到了es模塊，須要在.eslintrc設置中指定parserOptions的sourceType為module。
{
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"parserOptions": {
"sourceType": "module"
},
"extends": "eslint:recommended", //運用引薦的eslint語法
"rules": {
"indent": ["error", 4], //自定義indent為4個空格，級別為error
"semi": ["off", "always"],
"no-console": "off",
"no-unused-vars": "off"
}
}2. 運用prettier強迫修正js代碼
運用prettier， 依據prettier自定義來強迫修正js代碼。
能夠在運用prettier時增加options，或許豎立一個config文件來設置options也能夠。
參考這裏
{
singleQuote: true,
trailingComma: "all",
bracketSpacing : true,
semi: true,
tabWidth: 4, //定義indent為4個空格
printWidth: 120
}3. precommit
這個插件目的是在commit之前，實行相干操縱"precommit": "gulp format_js"
4. husky
這個插件目的是豎立和git之間的hooks（鈎子）， 一般和precommit連繫用，
比方運用git commit這個敕令時， 會經由過程hooks挪用precommit語句。
如許我們就不須要特地去實行npm run precommit這個敕令了，
當我們git commit的時刻，husky會自動挪用npm run precommit。
5. lint-staged
然則另有一個題目， 上面實行完git commit 后，經由過程prettier修正了一切的js文件，
有些便不是我本身修正的文件，也會被強迫修正，
因而能夠經由過程lint-staged這個node模塊來指定stage中的文件。
頭腦很簡樸，只對git stage中的文件處置懲罰。
能夠參考這裏
一般運用它的頭腦：
- 實行git commit時，經由過程husky挪用
precommit -
precommit實行lint-staged，即只對git stage中的文件舉行處置懲罰 - 在
lint-staged中設置prettier修正js文件(增加一個config文件來設置) - 在
lint-staged中設置eslintjs檢測文件(增加一個eslintrc文件來設置) - 假如一般經由過程， 則把經由過程prettier修正和eslint檢測的js文件,經由過程git add 增加
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [ // 要處置懲罰的js途徑
"prettier --write", //要處置懲罰的文件上修正
"eslint --fix", // 參數fix的意義是：依據eslint設置文件自動修復js文件
"git add"
]
},prettier 能強迫修正js，eslint –fix也能強迫修正js， 區分是什麼呢？？？
我的明白prettier更強一點，eslint –fix 強迫修正有限。
這裡有一個注重點,prettier的設置參數， 經由過程增加一個config文件來設置。
能夠在運用prettier時增加options，或許豎立一個config文件來設置options也能夠。
“lint-staged”的設置的意義是，
坑對git stage中的文件的操縱，如eslint *.js, git add *.js, 不能用寫gulp *.js
參考這裏
我增加的是 prettier.config.js文件，
module.exports = {
printWidth: 120,
parser: "flow",
singleQuote: true,
tabWidth: 4,
bracketSpacing : true,
semi: true
}; eslintrc前面已寫過了。
經由過程lint-staged就不須要第7步中天生一個臨時文件（tempjs）來過渡了，
由於prettier就直接處置懲罰stage終端文件了。
頭腦：
- 經由過程lint-staged獵取想要處置懲罰的js文件
- 經由過程prettier 依據自定義劃定規矩強迫修正要處置懲罰的js文件
- eslint檢測經由過程prettier強迫修正的js文件
- eslint檢測經由過程的話， 將處置懲罰的js文件增加到git stage中
運用es6寫js時，轉化為各個瀏覽器能辨認的es5
6. babel 編譯
babel用來將es6語法轉化為es5， 比方es6中的let轉化為var， 變量字符串拼接轉化為+，等等。
連繫webpack用，就須要運用webpack壯大的loader， 它依賴於babel-core，所以須要裝置babel-loader和babel-core。
本身的明白： babel, babel-core供應了babel的運轉環境（明白有毛病的話，以後糾正）。
只要這兩個（babel, babel-core）還不能完成轉譯，須要transform插件（如babel-preset-env）
然後須要裝置babel-preset-env來將本身寫的es6（源碼），依據當前實行環境（瀏覽器），
轉化為es5（當前環境-瀏覽器能辨認的語法）
兼并js
為何須要兼并js呢，經由過程兼并js文件，能夠削減http要求。
7. concat
經由過程webpack能夠將多個js文件兼并成一個js文件。
一個進口文件，一個輸出。
用法相對簡樸，
如今有一個新的需求task1， 須要零丁寫幾個js文件，
然則不想和其他js兼并到一同，也就是說想零丁兼并這幾個js文件，然後零丁輸出，
這個時刻， 就多進口文件，多個輸出。
比起gulp來，webpack能夠很輕易的完成這個功用。
緊縮js
8. uglify
webpack中能夠運用 uglifyjs-webpack-plugin用來緊縮js文件
緊縮很簡樸， 獵取js原文件，兼并，然後緊縮
sourcemap
9. sourcemaps
sourcemap 的目的：復原源碼，
什麼意義呢？ 當我們將源碼經由兼并，緊縮處置懲罰后，成為了一個文件，不輕易調試。
特別是緊縮后更是面目一新，如許我們在開闢階段不能完成debug，比方打斷點功用就不能夠完成了。
sorucemap就是處理的這個題目。
經由sourcemap處置懲罰后，在目的目次（dest指定的）下，天生一個新文件（與轉譯前對應的map文件），
目次構造與轉譯前完全對應。如許我們就很輕易找到某個文件，然後完成打斷點。
webpack自帶sourcemap功用，只須要增加devtool既能夠。
範例校驗css代碼
範例校驗js寫法的東西有jslint，jshint，近來的eslint等等，
範例校驗css寫法的東西有csslint，stylelint等等。
10. stylelint
stylelint用來檢測css是不是依據設置文件來寫的，是基於postcss的一個檢測東西。
stylefmt是一個依據stylelint的設置文件來強迫修正css文件的插件。有點prettier的意義。
然則能夠不必stylefmt， 在stylelint的選項中增加 --fix 也能夠修正css文件。
npm install postcss stylelint-loader stylelint stylelint-config-standard -save-dev
運用stylelint時，有個規範設置插件， stylelint-config-standard。
以下為 stylelint的設置文件(.stylelintrc)
{
"extends": "stylelint-config-standard", // 運用stylelint的默許規範設置
"rules": {
"declaration-block-trailing-semicolon": null, // 種種劃定規矩，依據本身須要能夠天真設置
"indentation": 4,
"block-no-empty": null,
"max-empty-lines": 1,
"selector-list-comma-newline-after": never-multi-line,
"at-rule-no-unknown": null,
"declaration-colon-space-after": null,
"no-duplicate-selectors" : null,
"no-descending-specificity": null,
"selector-pseudo-element-colon-notation": null,
"no-empty-source": null
}
}11. postcss
- 當我們用sass的寫法來謄寫css
- 想在css頂用變量，for輪迴等語法
- 想應用 （cssnext）[http://cssnext.io/] 謄寫css時
依據差別瀏覽器自動增加前綴 (autoprefixer)
當我們想在css中完成上述等功用時，能夠用postcss。
postcss就是一個平台，能夠經由過程增加種種插件來完成上述等功用。
npm install postcss-cssnext postcss-simple-vars postcss-nested --save-dev
能夠寫一個postcss的設置文件來特地範例postcss相干的設置，也能夠直接寫在在webpack設置文件中。
css兼并
webpack很輕易的完成css兼并
末了附上完全的(github源代碼)[https://github.com/zhangchch/…]。
以上都是本身的明白，若有毛病的處所，至心求指教。