1. 前端構建工具webpack有什麼缺陷
1.文檔缺失，尤其中文文檔
長期以來webpack官方文檔和example匱乏，提供的一些例子都是很簡單那種，經常發現完全按照例子來配置但就是跑不起來，中文文檔就更不用說了，少的可憐。這個問題也直接導致下面的第2點。
2.配置難&難調試
稍微復雜一點的項目，如果使用webpack編譯，不經過一段痛苦不堪的配置調試過程是沒法正常跑起來的。這還沒完，在自己機器上跑起來之後可能到了另一個同事哪兒又報錯了等等。總之正如下面有人回答那樣，配置文件一旦跑起來，是根本不敢去改的，生怕又出錯。
webpack的錯誤提示也非常難看懂，基本不可能從錯誤很直觀的找到原因，長期以來碰到問題只能靠猜，你沒看錯，就是靠猜！！
3.編譯慢
經驗不足的同學很容易碰到這個問題，當然可以通過一些手段做優化，比如配置mole的resolve、root等，使用happypack加速、dll提前編譯等等。但是筆者曾經嘗試過happypack，對編譯速度有提升但效果不明顯，dll的話我有按照官方文檔的做法去做，但是最終編譯出來又報了一些莫名其妙的錯（也有可能是代碼寫的有問題），總之心累，後來直接改成externals方式，全局script引入第三方庫。
4.對server-render不友好
webpack本質上還是靜態打包，意思就是打包完成之後其實文件的載入順序已經固定，只是被載入的時間不定而已。所以使用webpack原則上不存在按需載入之類的說法，code split其實是人工分隔，但是真實的按需載入場景豈是人工能枚舉完的 （下劃線這句話不太好解釋，也不想過多解釋，熟悉前端工程的人應該都明白啥意思）。
在這里我要說的對server-render不友好其實是指html的處理，webpack其實是通過在js里用require標記資源然後載入任意資源（css、圖片、fonts等等），但其實html文件才是頁面真實的入口，最終編譯出的js還是需要引入到html里，為了防止css懶載入導致頁面抖動，編譯完的css還需要從js里邊提取出來放到html外鏈。
目前一般都是通過html-webpack-plugin來做這個事情，先搜集某個html所引用的靜態資源最終自動插入到html。這種方式對於前端渲染的應用沒有問題，但是對於server-render的那就不行了，因為server-render下html是作為模板由後端語言吐出，而開發模式下（例如webpack-dev-server）webpack是不會輸出任何文件的（開發環境webpack是將文件放到內存然後在路由層自動serve了），所以這會導致開發環境模板無法引用靜態資源。當然，有一種解決方案就是靜態資源不改變文件名稱，預先寫好路徑，開發環境和生產環境同名（即覆蓋式發布）。
2. webpack執行機制流程是怎麼樣的
幾乎所有業務的開發構建都會用到 webpack 。的確，作為模塊載入和打包神器，只需配置幾個文件，載入各種 loader 就可以享受無痛流程化開發。但對於 webpack 這樣一個復雜度較高的插件集合，它的整體流程及思想對我們來說還是很透明的。那麼接下來我會帶你了解 webpack 這樣一個構建黑盒，首先來談談它的流程。 准備工作 1. webstorm 中配置 webpack-webstorm-debugger-script 在開始了解之前，必須要能對 webpack 整個流程進行 debug ，配置過程比較簡單。 先將 webpack-webstorm-debugger-script 中的軟體外包企業公司 置於 webpack.config.js 的同一目錄下，搭建好你的腳手架後就可以直接 Debug 這個 webstorm-debugger.js 文件了。 2. webpack.config.js 配置 估計大家對 webpack.config.js 的配置也嘗試過不少次了，這里就大致對這個配置文件進行個分析。 var path = require('path'); var node_moles = path.resolve(__dirname, 'node_moles'); var pathToReact = path.resolve(node_moles, 'react/dist/react.min.js'); mole.exports = { // 入口文件，是模塊構建的起點，同時每一個入口文件對應最後生成的一個 chunk。 entry: { bundle: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?', path.resolve(__dirname, 'app/app.js') ], }, // 文件路徑指向(可加快打包過程)。 resolve: { alias: { 'react': pathToReact } }, // 生成文件，是模塊構建的終點，包括輸出文件與輸出路徑。 output: { path: path.resolve(__dirname, 'build'), filename: '[name].js', }, // 這里配置了處理各模塊的 loader ，包括 css 預處理 loader ，es6 編譯 loader，圖片處理 loader。 mole: { loaders: [ { test: /\.js$/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ], noParse: [pathToReact] }, // webpack 各插件對象，在 webpack 的事件流中執行對應的方法。 plugins: [ new webpack.HotMoleReplacementPlugin(); ] }; 除此之外再大致介紹下 webpack 的一些核心概念: loader : 能轉換各類資源，並處理成對應模塊的載入器。loader 間可以串列使用。 chunk : code splitting後的產物，也就是按需載入的分塊，裝載了不同的mole。 對於mole和chunk的關系可以參照webpack官方的這張圖: plugin : webpack 的插件實體，這里以 UglifyJsPlugin 為例。 function UglifyJsPlugin(options) { this.options = options; } mole.exports = UglifyJsPlugin; UglifyJsPlugin.prototype.apply = function(compiler) { compiler.plugin("compilation", function(compilation) { compilation.plugin("build-mole", function(mole) { }); compilation.plugin("optimize-chunk-assets", function(chunks, callback) { // Uglify 邏輯 }); compilation.plugin("normal-mole-loader", function(context) { }); }); }; 在 webpack 中你經常可以看到 compilation.plugin('xxx', callback) ，你可以把它當作是一個事件的綁定，這些事件在打包時由 webpack 來觸發。 3. 流程總覽 在具體流程學習前，可以先通過這幅 webpack整體流程圖 了解一下大致流程(建議保存下來查看)。 shell 與 config 解析 每次在命令行輸入 webpack 後，操作系統都會去調用 ./node_moles/.bin/webpack 這個 shell 腳本。這個腳本會去調用./node_moles/webpack/bin/webpack.js 並追加輸入的參數，如 -p , -w 。(圖中 webpack.js 是 webpack 的啟動文件，而 $@ 是後綴參數) 在 webpack.js 這個文件中 webpack 通過 optimist 將用戶配置的 webpack.config.js 和 shell 腳本傳過來的參數整合成 options 對象傳到了下一個流程的控制對象中。 1. optimist 和 commander 一樣，optimist 實現了 node 命令行的解析，其 API 調用非常方便。 var optimist = require("optimist"); optimist .boolean("json").alias("json", "j").describe("json") .boolean("colors").alias("colors", "c").describe("colors") .boolean("watch").alias("watch", "w").describe("watch") ... 獲取到後綴參數後，optimist 分析參數並以鍵值對的形式把參數對象保存在 optimist.argv 中，來看看 argv 究竟有什麼？ // webpack --hot -w { hot: true, profile: false, watch: true, ... } 2. config 合並與插件載入 在載入插件之前，webpack 將 webpack.config.js 中的各個配置項拷貝到 options 對象中，並載入用戶配置在 webpack.config.js 的 plugins 。接著 optimist.argv 會被傳入到 ./node_moles/webpack/bin/convert-argv.js 中，通過判斷 argv 中參數的值決定是否去載入對應插件。(至於 webpack 插件運行機制，在之後的運行機制篇會提到) ifBooleanArg("hot", function() { ensureArray(options, "plugins"); var HotMoleReplacementPlugin = require("../lib/HotMoleReplacementPlugin"); options.plugins.push(new HotMoleReplacementPlugin()); }); ... return options; options 作為最後返回結果，包含了之後構建階段所需的重要信息。 { entry: {},//入口配置 output: {}, //輸出配置 plugins: [], //插件集合(配置文件 + shell指令) mole: { loaders: [ [Object] ] }, //模塊配置 context: //工程路徑 ... } 這和 webpack.config.js 的配置非常相似，只是多了一些經 shell 傳入的插件對象。插件對象一初始化完畢， options 也就傳入到了下個流程中。 var webpack = require("../lib/webpack.js"); var compiler = webpack(options); 編譯與構建流程 在載入配置文件和 shell 後綴參數申明的插件，並傳入構建信息 options 對象後，開始整個 webpack 打包最漫長的一步。而這個時候，真正的 webpack 對象才剛被初始化，具體的初始化邏輯在 lib/webpack.js 中，如下: function webpack(options) { var compiler = new Compiler(); ...// 檢查options,若watch欄位為true,則開啟watch線程 return compiler; } ... webpack 的實際入口是 Compiler 中的 run 方法，run 一旦執行後，就開始了編譯和構建流程 ，其中有幾個比較關鍵的 webpack 事件節點。 compile 開始編譯 make 從入口點分析模塊及其依賴的模塊，創建這些模塊對象 build-mole 構建模塊 after-compile 完成構建 seal 封裝構建結果 emit 把各個chunk輸出到結果文件 after-emit 完成輸出 1. 核心對象 Compilation compiler.run 後首先會觸發 compile ，這一步會構建出 Compilation 對象: compilation類圖 這個對象有兩個作用，一是負責組織整個打包過程，包含了每個構建環節及輸出環節所對應的方法，可以從圖中看到比較關鍵的步驟，如 addEntry() , _addMoleChain() , buildMole() , seal() , createChunkAssets() (在每一個節點都會觸發 webpack 事件去調用各插件)。二是該對象內部存放著所有 mole ，chunk，生成的 asset 以及用來生成最後打包文件的 template 的信息。 2. 編譯與構建主流程 在創建 mole 之前，Compiler 會觸發 make，並調用 Compilation.addEntry 方法，通過 options 對象的 entry 欄位找到我們的入口js文件。之後，在 addEntry 中調用私有方法 _addMoleChain ，這個方法主要做了兩件事情。一是根據模塊的類型獲取對應的模塊工廠並創建模塊，二是構建模塊。 而構建模塊作為最耗時的一步，又可細化為三步: 調用各 loader 處理模塊之間的依賴 webpack 提供的一個很大的便利就是能將所有資源都整合成模塊，不僅僅是 js 文件。所以需要一些 loader ，比如 url-loader ，jsx-loader ， css-loader 等等來讓我們可以直接在源文件中引用各類資源。webpack 調用 doBuild() ，對每一個 require() 用對應的 loader 進行加工，最後生成一個 js mole。 Compilation.prototype._addMoleChain = function process(context, dependency, onMole, callback) { var start = this.profile && +new Date(); ... // 根據模塊的類型獲取對應的模塊工廠並創建模塊 var moleFactory = this.dependencyFactories.get(dependency.constructor); ... moleFactory.create(context, dependency, function(err, mole) { var result = this.addMole(mole); ... this.buildMole(mole, function(err) { ... // 構建模塊，添加依賴模塊 }.bind(this)); }.bind(this)); }; 調用 acorn 解析經 loader 處理後的源文件生成抽象語法樹 AST Parser.prototype.parse = function parse(source, initialState) { var ast; if(!ast) { // acorn以es6的語法進行解析 ast = acorn.parse(source, { ranges: true, locations: true, ecmaVersion: 6, sourceType: "mole" }); } ... }; 遍歷 AST，構建該模塊所依賴的模塊 對於當前模塊，或許存在著多個依賴模塊。當前模塊會開辟一個依賴模塊的數組，在遍歷 AST 時，將 require() 中的模塊通過addDependency() 添加到數組中。當前模塊構建完成後，webpack 調用 processMoleDependencies 開始遞歸處理依賴的 mole，接著就會重復之前的構建步驟。 Compilation.prototype.addMoleDependencies = function(mole, dependencies, l, cacheGroup, recursive, callback) { // 根據依賴數組(dependencies)創建依賴模塊對象 var factories = []; for(var i = 0; i < dependencies.length; i++) { var factory = _this.dependencyFactories.get(dependencies[i][0].constructor); factories[i] = [factory, dependencies[i]]; } ... // 與當前模塊構建步驟相同 } 3. 構建細節 mole 是 webpack 構建的核心實體，也是所有 mole的 父類，它有幾種不同子類：NormalMole , MultiMole ,ContextMole , DelegatedMole 等。但這些核心實體都是在構建中都會去調用對應方法，也就是 build() 。來看看其中具體做了什麼: // 初始化mole信息，如context,id,chunks,dependencies等。 NormalMole.prototype.build = function build(options, compilation, resolver, fs, callback) { this.buildTimestamp = new Date().getTime(); // 構建計時 this.built = true; return this.doBuild(options, compilation, resolver, fs, function(err) { // 指定模塊引用，不經acorn解析 if(options.mole && options.mole.noParse) { if(Array.isArray(options.mole.noParse)) { if(options.mole.noParse.some(function(regExp) { return typeof regExp === "string" ? this.request.indexOf(regExp) === 0 : regExp.test(this.request); }, this)) return callback(); } else if(typeof options.mole.noParse === "string" ? this.request.indexOf(options.mole.noParse) === 0 : options.mole.noParse.test(this.request)) { return callback(); } } // 由acorn解析生成ast try { this.parser.parse(this._source.source(), { current: this, mole: this, compilation: compilation, options: options }); } catch(e) { var source = this._source.source(); this._source = null; return callback(new MoleParseError(this, source, e)); } return callback(); }.bind(this)); }; 對於每一個 mole ，它都會有這樣一個構建方法。當然，它還包括了從構建到輸出的一系列的有關 mole 生命周期的函數
3. Webpack 怎麼用
1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for proction (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的參數
]
}
};
要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 現在可以寫 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
5. 樣式表和圖片
首先更新你的代碼用 require() 載入靜態資源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
當你引用 CSS(或者 LESS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個 ｀<style>標簽. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
path: './build', // 圖片和 JS 會到這里來
publicPath: 'http://mycdn.com/', // 這個用來成成比如圖片的 URL
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 來連接多個人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 內聯 base64 URLs, 限定 <=8k 的圖片, 其他的用 URL
]
}
};
6. 功能開關
有些代碼我們只想在開發環境使用(比如 log), 或者 dogfooging 的伺服器里邊(比如內部員工正在測試的功能). 在你的代碼中, 引用全局變數吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然後配置 Webpack 當中的對應全局變數:
// webpack.config.js
// definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
然後你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 編譯. 注意一下因為 webpack -p 會執行 uglify dead-code elimination, 任何這種代碼都會被剔除, 所以你不用擔心秘密功能泄漏.
7. 多個進入點(entrypoints)
比如你用 profile 頁面跟 feed 頁面. 當用戶訪問 profile, 你不想讓他們下載 feed 頁面的代碼. 因此你創建多個包: 每個頁面一個 "main mole":
// webpack.config.js
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基於上邊 entry 的 key
}
};
針對 profile, 在頁面當中插入 <script src="build/Profile.js"></script>. feed 頁面也是一樣.
8. 優化共用代碼
feed 頁面跟 profile 頁面共用不要代碼(比如 React 還有通用的樣式和 component). Webpack 可以分析出來他們有多少共用模塊, 然後生成一個共享的包用於代碼的緩存.
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};
在上一個步驟的 script 標簽前面加上 <script src="build/common.js"></script> 你就能得到廉價的緩存了.
9. 非同步載入
CommonJS 是同步的, 但是 Webpack 提供了非同步指定依賴的方案. 這對於客戶端的路由很有用, 你想要在每個頁面都有路由, 但你又不像在真的用到功能之前就下載某個功能的代碼.
聲明你想要非同步載入的那個"分界點". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 語法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函數調用後, 模塊保證在同步請求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}
Webpack 會完成其餘的工作, 生成額外的 chunk 文件幫你載入好.
Webpack 在 HTML script 標簽中載入他們時會假設這些文件是怎你的根路徑下. 你可以用 output.publicPath 來配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 編譯能的資源位置
publicPath: "/assets/" // 引用你的文件時考慮使用的地址
}
4. Webpack有哪些核心分別都代表了什麼
有四個核心：
1.入口文件：entr
入口文件根據依賴關系確定要打包的內容 可以將入口文件認為是第一個啟動文檔。
2.出口：output
可以控制webpack如何向硬碟寫入編譯文件 在webpack中配置output屬性的最低要求是 將他的值設置值為一個對象 包括path 和 filename Path 是目標輸出目錄的絕對路徑 Filename 是用於輸出文件的文件名。
3.Loader
可以是在import或者載入模塊時與處理文件 也就是類似於其他構件工具中「任務」 並且提供了前端構建步驟的強大方法。Loader中有兩個目標 一是識別中被對應的loader進行轉換的那些文件 二是轉換這些文件 使其能夠被添加到依賴圖中。
4.插件
插件是webpack的支柱功能 webpack自身也是構建與插件系統之上 插件的目的在於解決loader無法解決的其他事。 （BY三人行慕課）
5. 什麼是WebPack，為什麼要使用它
1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for proction (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的參數
]
}
};
要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 現在可以寫 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
6. webpack 怎麼直接實時編譯輸出文件
使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。react安裝當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。#npminstallreactreact-dom–savereact安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。react解析器babel安裝babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安裝#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝一般情況下我們選擇本地安裝，這樣便於管理。打包工具webpack的安裝同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。#npminstallwebpack–save-dev//本地安裝#npminstallwebpack–g//全局安裝如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。這里我們選擇全局安裝。這樣才能出現我們將要說的問題。webpack配置文件編寫安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。代碼一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}編譯過程中出現的錯誤好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。接下來我們就要編譯打包我們的項目。#webpack執行該命令以後，你會發現出現如下的錯誤：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……這也就是說找不到babel-preset-react。好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。解決問題的方式出現上述問題以後，我們有這樣三種方式可以解決。方式一要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。query:{presets:['react']}好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安裝的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。方式二此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//將webpack安裝到本地位置——也就是項目目錄下的node_moles中#ln–s/項目根目錄/node_moles/webpack/bin/webpack.js/usr/bin/webpack//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）//這樣我們就可以在任意位置直接使用webpack命令了。此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。方式三該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。代碼二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}
7. webpack 打包怎麼優化的
解決webpack打包的文件體積過大的問題：
確實，每次打包從入口開始，會parse所有的依賴，多的時候竟然打包一次要2秒多，簡直不能忍。然而，有幾個解決方案，最有效的，是使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的。這樣子，打包時間迅速降到200ms以內。 再優化下去的話，我們要知道webpack打包的過程中做了啥，首先是解析依賴啦，然後就是各種各樣的loader。從解析依賴的角度入手，我們可以bower install一些打包好的文件，然後通過設置別名讓依賴指向這個文件，這樣就減去了第三方庫的依賴解析時間。 然後各種各樣的loader也是很耗時的，一種辦法是在loader裡面配include，讓loader只針對特殊資源。
8. vue和angular 編譯速度誰更快
框架之間的對比雖然是老生常談，但也確實是繞不過去的話題，Vue本身的文檔里也直接就有和其他框架的對比。同為開源的技術方案，比較本身其實沒有任何問題，但在寫Vue與其他框架的比較的時候，我們盡力做到兩點：
1. 確保事實的准確性。有的就是有，沒有就是沒有，不確定的就不說，弄錯了一定改。
2. 確保語氣的中立性。別人的缺點指出但不嘲諷，優點大方承認。
之前 @汪志成 對Vue跟 Angular 的比較文案提出了意見，我們也對應地進行了修訂。也歡迎社區繼續進行監督和反饋 —— 比較的目的不是扭曲大家的認知，而是為了幫助大家做出自己的判斷。
現在說回來大漠（後面都用大漠指代，注意跟 w3cplus@大漠老師不是一個人，對不住了哈哈）的這篇文章，很遺憾，以上兩點都不及格。
先說事實。
CLI/工具鏈
首先兩個框架 CLI 的定位不一致。vue-cli 不是一個打包工具，它只是一個 scaffold，也就是初始化工具。真正負責打包的是初始化之後項目內的 webpack 配置和 npm 腳本。從一開始vue-cli 就是這樣的設計意圖，項目真正的工具鏈在項目模板裡面而不是 CLI 裡面。
相比之下 @angular/cli 是一個全包式的命令行工具，一切都是通過 `ng` 來執行，但這不代表 `ng` 有的命令Vue就沒有對應的功能 —— 比如在vue-cli 生成的項目裡面：
npm run dev 對應 ng serve
npm run build 對應 ng build
npm run lint 對應 ng lint
npm run unit 對應 ng test
npm run e2e 對應 ng e2e
除了 i18n 之外，@angular/cli 有的Vue都有。『很多日常開發必備的功能都需要開發者自己去下載配置第三方的Node模塊』這句話是一個事實上的錯誤。看起來大漠連vue-cli 生成的項目都沒跑過就急著寫文章了呢。
其次，CLI 命令/參數多 =更優秀？並沒有這樣的道理，create-React-app 估計要哭暈在廁所了。如果我們仔細看看文中的截圖，ng build 的多個參數，其實就是對應不同的底層 webpack 配置。說實話，我相信不僅僅是我，對於很多其他開發者而言，更寧可直接閱讀 webpack 的文檔來調整真正的 webpack 配置（並且可以 commit 進項目），而不是去額外學習一套由 Angular 封裝的抽象，因為實際生產中需求千變萬化，完全被 CLI 封裝的配置不利於二次開發。
實事求是地說，@angular/cli 確實有一些值得學習的地方，比如 ng serve 對 SSL 的支持。我們也會在新版本的vue-cli 中持續吸收改進，但連vue-cli 能做什麼都沒弄清楚就拿玩具來打比方，只能貽笑大方了。
非同步載入模塊
我不知道為什麼大漠又截了個不知哪裡的舊中文文檔的圖，還沒截全 —— 最新的關於非同步載入的文檔是下面這兩個鏈接：
文檔中關於非同步組件的部分
路由文檔關於路由懶載入的部分
Vue將一個組件（以及其所有依賴）改為非同步載入，所需要的只是把：
改成
就這么簡單。這里注意三點：
當這樣分割的時候，該組件所依賴的其他組件或其他模塊都會自動被分割進對應的 chunk 里，不存在大漠所暗示的『手動改 500 個組件』這樣的情況。況且兩邊代碼分割的功能都是 webpack 提供的，我真不知道大漠是真的不懂還是故意誤導。
所謂的路由級別的分割，只需要把這個組件作為路由組件就可以了，甚至連路由配置表都不用改。
更重要的是這樣的非同步組件並不一定只能用在路由層面 —— 任何你要用到一個組件的地方，都可以用非同步組件無縫替換之，這種靈活性是 Angular 的 loadChildren 根本無法比擬的。比如一個動態的長表單頁面，你甚至可以根據用戶目前的輸入來動態抓取表單接下來的部分（這個用例還是 wepback 的維護者 Sean Larkin 發現並用在生產中的）。
單元測試和集成測試
—— 事實錯誤。vue-cli 的 webpack 模板內置了開箱即用的 Karma + Jasmine 配置，自帶了一個初始測試用例，npm run unit 即可。這又雙一次證明大漠根本沒有跑過vue-cli 生成的項目。
Vue的單測不僅僅支持 Karam + Jasmine - 事實上社區有廣泛的單測反饋，對於 Jest, Ava 都有實踐，我們正在開發中的官方的單測工具庫vue-test-utils （由社區最流行的單測庫 avoriaz 的開發者開發）會進一步簡化常見的組件單測斷言需求，並且還會有和所有主流 test runner 的整合指南。
—— again，事實錯誤。vue-cli 的 webpack 模板內置了開箱即用的 Nightwatch + Selenium E2E 測試配置，自帶了一個初始測試用例，npm run e2e 即可。這又雙叒一次證明大漠根本沒有跑過vue-cli 生成的項目。
—— 集成測試這種東西，有什麼技術門檻可言，還需要抄么？順便說一句，vue-cli 初始化的項目可是早比 @angular/cli 正式發布前就已經自帶集成測試了...
9. 如何加快webpack打包效率
1. 打包多個頁面的js文件 讀取src/views下的目錄，約定每一個目錄當成一個頁面，打包成一個js chunk。 2. 打包多個html 循環生成多個HtmlWebpackPlugin插件，把每一個插件的chunks各自指向上面打包的js chunk。