摘要：前端構(gòu)建之之前寫了一個(gè)前端構(gòu)建之，同樣的目的寫一個(gè)，內(nèi)容基本上和一樣，主要用來自己學(xué)習(xí)記錄。合并很方便的實(shí)現(xiàn)合并最后附上完整的源代碼。

之前寫了一個(gè)前端構(gòu)建之gulp，同樣的目的寫一個(gè)webpack， 內(nèi)容基本上和gulp一樣，主要用來自己學(xué)習(xí)記錄。

為什么需要前端構(gòu)建

不解釋

本文大致分為以下幾個(gè)內(nèi)容：

規(guī)范校驗(yàn)js代碼（jslint）

js解釋器（babel）

合并js代碼（concat）

壓縮js代碼（uglify）

sourcemap

規(guī)范校驗(yàn)css代碼(csslint)

css解釋器

合并css代碼

壓縮css代碼

1. 用webpack檢測(cè)js代碼規(guī)范

js檢測(cè)工具用來

檢測(cè)自己寫的js是否有語法錯(cuò)誤

是否根據(jù)我們?cè)O(shè)定的規(guī)則寫的

常用的js檢測(cè)工具有jshint、jslint、eslint等， 推薦用eslint。
在webpack中，推薦用eslint這個(gè)插件。使用eslint時(shí)配置一個(gè).eslintrc文件，用來編寫自定義js規(guī)則。
如果用到了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個(gè)空格，級(jí)別為error
    "semi": ["off", "always"],
    "no-console": "off",
    "no-unused-vars": "off"
  }
}

2. 使用prettier強(qiáng)制修改js代碼

使用prettier， 根據(jù)prettier自定義來強(qiáng)制修改js代碼。
可以在使用prettier時(shí)添加options，或者建立一個(gè)config文件來配置options也可以。
參考這里

        {
            singleQuote: true,
            trailingComma: "all",
            bracketSpacing : true,
            semi: true,
            tabWidth: 4,  //定義indent為4個(gè)空格
            printWidth: 120
        }

3. precommit

這個(gè)插件目的是在commit之前，執(zhí)行相關(guān)操作
"precommit": "gulp format_js"

4. husky

這個(gè)插件目的是建立和git之間的hooks（鉤子）， 通常和precommit結(jié)合用，
比如使用git commit這個(gè)命令時(shí)， 會(huì)通過hooks調(diào)用precommit語句。
這樣我們就不需要專門去執(zhí)行npm run precommit這個(gè)命令了，
當(dāng)我們git commit的時(shí)候，husky會(huì)自動(dòng)調(diào)用npm run precommit。

5. lint-staged

但是還有一個(gè)問題， 上面執(zhí)行完git commit 后，通過prettier修改了所有的js文件，
有些便不是我自己修改的文件，也會(huì)被強(qiáng)制修改，
于是可以通過lint-staged這個(gè)node模塊來指定stage中的文件。
思想很簡單，只對(duì)git stage中的文件處理。
可以參考這里

通常使用它的思想：

執(zhí)行git commit時(shí)，通過husky調(diào)用precommit

precommit 執(zhí)行lint-staged，即只對(duì)git stage中的文件進(jìn)行處理

在lint-staged中配置prettier修改js文件(添加一個(gè)config文件來配置)

在lint-staged中配置eslintjs檢測(cè)文件(添加一個(gè)eslintrc文件來配置)

如果正常通過， 則把通過prettier修改和eslint檢測(cè)的js文件,通過git add 添加

  "scripts": {  
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [                 // 要處理的js路徑
      "prettier --write",  //要處理的文件上修改
      "eslint  --fix",       // 參數(shù)fix的意思是：根據(jù)eslint配置文件自動(dòng)修復(fù)js文件
      "git add"
    ]
  },

prettier 能強(qiáng)制修改js，eslint --fix也能強(qiáng)制修改js， 區(qū)別是什么呢？？？
我的理解prettier更強(qiáng)一點(diǎn)，eslint --fix 強(qiáng)制修改有限。

這里有一個(gè)注意點(diǎn),prettier的配置參數(shù)， 通過添加一個(gè)config文件來配置。

可以在使用prettier時(shí)添加options，或者建立一個(gè)config文件來配置options也可以。

"lint-staged"的配置的意思是，
坑對(duì)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前面已經(jīng)寫過了。

通過lint-staged就不需要第7步中生成一個(gè)臨時(shí)文件（tempjs）來過渡了， 
因?yàn)閜rettier就直接處理stage終端文件了。

思想：

通過lint-staged獲取想要處理的js文件

通過prettier 根據(jù)自定義規(guī)則強(qiáng)制修改要處理的js文件

eslint檢測(cè)通過prettier強(qiáng)制修改的js文件

eslint檢測(cè)通過的話， 將處理的js文件添加到git stage中

6. babel 編譯

babel用來將es6語法轉(zhuǎn)化為es5， 比如es6中的let轉(zhuǎn)化為var， 變量字符串拼接轉(zhuǎn)化為+，等等。
結(jié)合webpack用，就需要使用webpack強(qiáng)大的loader， 它依賴于babel-core，所以需要安裝babel-loader和babel-core。

自己的理解： babel, babel-core提供了babel的運(yùn)行環(huán)境（理解有錯(cuò)誤的話，之后改正）。
只有這兩個(gè)（babel, babel-core）還不能實(shí)現(xiàn)轉(zhuǎn)譯，需要transform插件（如babel-preset-env）
然后需要安裝babel-preset-env來將自己寫的es6（源碼），根據(jù)當(dāng)前執(zhí)行環(huán)境（瀏覽器），
轉(zhuǎn)化為es5（當(dāng)前環(huán)境-瀏覽器能識(shí)別的語法）

為什么需要合并js呢，通過合并js文件，可以減少http請(qǐng)求。

7. concat

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

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

比起gulp來，webpack可以很方便的實(shí)現(xiàn)這個(gè)功能。

8. uglify

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

9. sourcemaps

 sourcemap 的目的：還原源碼，
 什么意思呢？ 當(dāng)我們將源碼經(jīng)過合并，壓縮處理后，成為了一個(gè)文件，不方便調(diào)試。
 特別是壓縮后更是面目全非，這樣我們?cè)陂_發(fā)階段不能實(shí)現(xiàn)debug，比如打斷點(diǎn)功能就不可能實(shí)現(xiàn)了。
 sorucemap就是解決的這個(gè)問題。
 
 經(jīng)過sourcemap處理后，在目標(biāo)目錄（dest指定的）下，生成一個(gè)新文件（與轉(zhuǎn)譯前對(duì)應(yīng)的map文件），
 目錄結(jié)構(gòu)與轉(zhuǎn)譯前完全對(duì)應(yīng)。這樣我們就很容易找到某個(gè)文件，然后實(shí)現(xiàn)打斷點(diǎn)。
 
 webpack自帶sourcemap功能，只需要添加devtool既可以。
 

規(guī)范校驗(yàn)js寫法的工具有jslint，jshint，最近的eslint等等，
規(guī)范校驗(yàn)css寫法的工具有csslint，stylelint等等。

10. stylelint

stylelint用來檢測(cè)css是否根據(jù)配置文件來寫的，是基于postcss的一個(gè)檢測(cè)工具。
stylefmt是一個(gè)根據(jù)stylelint的配置文件來強(qiáng)制修改css文件的插件。有點(diǎn)prettier的意思。

但是可以不用stylefmt， 在stylelint的選項(xiàng)中添加 --fix 也可以修改css文件。

npm install postcss stylelint-loader stylelint stylelint-config-standard -save-dev

使用stylelint時(shí)，有個(gè)標(biāo)準(zhǔn)配置插件， stylelint-config-standard。

以下為 stylelint的配置文件(.stylelintrc)

{
    "extends": "stylelint-config-standard",    // 使用stylelint的默認(rèn)標(biāo)準(zhǔn)配置
    "rules": {
        "declaration-block-trailing-semicolon": null,   // 各種規(guī)則，根據(jù)自己需要可以靈活配置
        "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

當(dāng)我們用sass的寫法來書寫css

想在css中用變量，for循環(huán)等語法

想利用 （cssnext）[http://cssnext.io/] 書寫css時(shí)

根據(jù)不同瀏覽器自動(dòng)添加前綴 (autoprefixer)

當(dāng)我們想在css中實(shí)現(xiàn)上述等功能時(shí)，可以用postcss。
postcss就是一個(gè)平臺(tái)，可以通過添加各種插件來實(shí)現(xiàn)上述等功能。

npm install postcss-cssnext postcss-simple-vars postcss-nested --save-dev

可以寫一個(gè)postcss的配置文件來專門規(guī)范postcss相關(guān)的配置，也可以直接寫在在webpack配置文件中。

webpack很方便的實(shí)現(xiàn)css合并

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

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