摘要：前端構建之之前寫了一個前端構建之，同樣的目的寫一個，內容基本上和一樣，主要用來自己學習記錄。合并很方便的實現合并最后附上完整的源代碼。

之前寫了一個前端構建之gulp，同樣的目的寫一個webpack， 內容基本上和gulp一樣，主要用來自己學習記錄。

為什么需要前端構建

不解釋

本文大致分為以下幾個內容：

規范校驗js代碼（jslint）

js解釋器（babel）

合并js代碼（concat）

壓縮js代碼（uglify）

sourcemap

規范校驗css代碼(csslint)

css解釋器

合并css代碼

壓縮css代碼

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中

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文件，可以減少http請求。

7. concat

通過webpack可以將多個js文件合并成一個js文件。
一個入口文件，一個輸出。
用法相對簡單， 

現在有一個新的需求task1， 需要多帶帶寫幾個js文件，
但是不想和其他js合并到一起，也就是說想多帶帶合并這幾個js文件，然后多帶帶輸出，
這個時候， 就多入口文件，多個輸出。

比起gulp來，webpack可以很方便的實現這個功能。

8. uglify

webpack中可以使用 uglifyjs-webpack-plugin用來壓縮js文件
壓縮很簡單， 獲取js原文件，合并，然后壓縮

9. sourcemaps

 sourcemap 的目的：還原源碼，
 什么意思呢？ 當我們將源碼經過合并，壓縮處理后，成為了一個文件，不方便調試。
 特別是壓縮后更是面目全非，這樣我們在開發階段不能實現debug，比如打斷點功能就不可能實現了。
 sorucemap就是解決的這個問題。
 
 經過sourcemap處理后，在目標目錄（dest指定的）下，生成一個新文件（與轉譯前對應的map文件），
 目錄結構與轉譯前完全對應。這樣我們就很容易找到某個文件，然后實現打斷點。
 
 webpack自帶sourcemap功能，只需要添加devtool既可以。
 

規范校驗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配置文件中。

webpack很方便的實現css合并

最后附上完整的(github源代碼)[https://github.com/zhangchch/...]。

 以上都是自己的理解，如有錯誤的地方，真心求指教。