前端構建之webpack

前端構建之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中的文件處理。
能夠參考這裏

一般使用它的思想：

1. 執行git commit時，經過husky調用precommit
2. precommit 執行lint-staged，即只對git stage中的文件進行處理
3. 在lint-staged中配置prettier修改js文件(添加一個config文件來配置)
4. 在lint-staged中配置eslintjs檢測文件(添加一個eslintrc文件來配置)
5. 若是正常經過， 則把經過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終端文件了。

思想：

1. 經過lint-staged獲取想要處理的js文件
2. 經過prettier 根據自定義規則強制修改要處理的js文件
3. eslint檢測經過prettier強制修改的js文件
4. 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

1. 當咱們用sass的寫法來書寫css
2. 想在css中用變量，for循環等語法
3. 想利用 （cssnext）[http://cssnext.io/] 書寫css時

4. 根據不一樣瀏覽器自動添加前綴 (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/...]。

以上都是本身的理解，若有錯誤的地方，真心求指教。