原文地址：atool-build

atool-build 在剛接觸react，還不知道 webpack 的時候，看到他一臉懵逼。

滾了兩個月回來看看他，其實就是 webpack 的二次封裝，將一些常用的配置方案集成起來，便于使用。

安裝

$ npm install -g atool-build

配置 package.json

atool-build 要求 package.json 文件里面增加 entry 字段。

其實就是指定需要操作的文件，與webpack 中的 entry 配置功能相同。

"entry": {
    "index": "./src/pathToYourEntry.jsx",
    "another": "./src/anotherEntry.jsx"
}

執(zhí)行構(gòu)建

$ atool-build

執(zhí)行 atool-build 操作相當于執(zhí)行 webpack --config webpack.config.js

會將 package 中 entry 中指定的文件進行壓縮混淆，針對每個文件會按文件名生成對應(yīng)的 文件名.js文件與 文件名.css 文件，并且會生成 common.js 和 common.css

參數(shù)

• -o, --output-path<path> 指定構(gòu)建后的輸出路徑

  • 默認是指定 dist 文件夾, atool-build -o aaa 設(shè)置后，會構(gòu)建到 aaa 文件夾下

• w, --watch [delpay] 是否監(jiān)控文件變化，默認為不監(jiān)控。

  • 默認構(gòu)建一次就結(jié)束命名，開啟監(jiān)控 atool-build -w 后命令行會保持構(gòu)建狀態(tài)，并且在每次修改保持后會按最小差異再次構(gòu)建文件。
  • 和熱更新類似，我覺得熱跟新就是在監(jiān)控完成自動構(gòu)建后，在幫我們做一次頁面的更新，想想就覺得好牛逼。

• --no-compress 不壓縮代碼。

  • 顧名思義，按文件導(dǎo)入狀態(tài)整合代碼，不做壓縮處理。

• --config [userConfigFile] 指定用戶配置文件。默認為根目錄下的 webpack.config.js 文件。這個配置文件不是必須的。

  • webpack 指定配置文件: webpack --config webpack.dev.config.js，同理， atool-build --config webpack.dev.config.js 達到同樣的效果。

• --devtool <devtool> 生成 sourcemap 的方法，默認為空，這個參數(shù)和 webpack 的配置一致。

  • 設(shè)置不同的構(gòu)建模式， webpack 可以通過設(shè)置json配置的 sourcemap 屬性來控制構(gòu)建模式， atool-build 通過 atool-build --devtool source-map 來設(shè)置內(nèi)部的 webpack.config.js 文件來達到此效果。

• --hash 使用 hash 模式的構(gòu)建, 并生成映射表 map.json。

  • 通過該命令構(gòu)建出來的文件會在末尾加上 -hash值 可以來判斷構(gòu)建出來的 hash 按需處理構(gòu)建文件。

webpack.config.js 配置舉例

使用

對于一些有自定義需求的項目，要是希望進一步做一些配置，按照下面的流程：

1. 運行命令 $ atool-build ;
2. 檢測當前文件夾是否有 webpack.config.js 文件;
3. 要是沒有則采用 atool-build 內(nèi)置的 webpack 配置，要是有這個文件，則將內(nèi)置的 webpack 配置對象傳入進行處理，返回的對象作為實際的 webpack 對象。

也就是說，我們可以通過 webpack.config.js 將 atool-build 內(nèi)置的 webpack 配置進一步進行處理（添加一些 loader，plugin 等），得到項目實際需要的效果。webpack.config.js 里有一個函數(shù)，會將內(nèi)置的 webpack 配置對象作為參數(shù)，而這個函數(shù)的返回值會作為新的 webpack 配置對象。所以，我們只需要改變這個對象就可以完成個性化配置。比如，我們添加一個 DefinePlugin 來處理項目里面的預(yù)留值：

webpack.config.js

// 得到 webpack
var webpack = require('atool-build/lib/webpack');

module.exports = function(webpackConfig) {
  // 添加一個plugin
  webpackConfig.plugins.push(
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify('true')
    });
  );
  // 返回 webpack 配置對象
  return webpackConfig;
};

內(nèi)置對象

atool-build 內(nèi)置了一個 webpack 配置對象，來滿足一般項目的需求，主要功能為：

entry

package.json 中 entry 對應(yīng)內(nèi)容

output

默認為 dist 文件夾，每個 entry key 對應(yīng) key.js, common.js, key.css, common.css(如果沒有樣式文件則沒有 css 文件)。比如：

{
  "entry":{
    "index":"./src/index.js"
  }
}

./dist：index.js, common.js, index.css, common.css

devtool

通過 atool-build --devtool devtool 得到，默認為 undefined

resolve

{
  modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
  extensions: ['', '.js', '.jsx'],
}

模塊解析配置項，extensions 解析的后綴

resolveLoader

{
  modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
}

node

如果在 package.json 中 browser 沒有設(shè)置，則設(shè)置 child_process, cluster, dgram, dns, fs, module, net, readline, repl, tls 為 empty

loader

• babel 處理 .js，.jsx 文件

  {
  presets: ['es2015', 'react', 'stage-0'],
  plugins: ['add-module-exports', 'typecheck'],
  }
  

• css：處理 .css 文件

• autoprefixer：給 css 屬性設(shè)置瀏覽器前綴

• less：處理 .less 文件，支持 less

• url：處理 .woff, .woff2, .ttf, .svg, png, jpg, jpeg, gif 文件

• file：處理 .eot 文件

• json：處理 .json 文件

plugins

• webpack.optimize.CommonsChunkPlugin: (打包成多個資源文件，可以有效利用緩存提升性能，做到文件按需加載)
• extract-text-webpack-plugin：（獨立出css樣式，如果我們希望樣式通過 <link> 引入，而不是放在 <style> 標簽內(nèi)）
• webpack.optimize.OccurenceOrderPlugin: (按照引用程度來排序各個模塊，引用的越頻繁id就越短，達到減小文件大小的效果)

更多內(nèi)容可見 getWebpackCommonConfig

注意點

• 對于自定義添加的 loader，plugin等依賴，需要在項目文件夾中npm install 這些依賴。但不需要再安裝 webpack 依賴，因為可以通過 require('atool-build/lib/webpack') 得到；
• 可以通過 atool-build --config file 來指定需要用到的配置文件，默認是 webpack.config.js，要是找不到則使用內(nèi)置的 webpack 配置。

上面涉及到的 webpack 的具體作用，基本悶逼狀態(tài)，日后深入學(xué)習(xí)回來補上...囧 我估計可能很難補上了，到時候在寫一篇 webpack 的學(xué)習(xí)筆記 ^_