我愛吃花椒

　　先貼一篇對vue-cli#2.0進行webpack配置的詳細分析：

　　https://zhuanlan.zhihu.com/p/24322005

　　一、看一下webpack的打包流程

　　1、package.json中的“script”的"build": "node build/build.js",

　　　　在build.js中      var webpackConfig = require('./webpack.prod.conf')

　　2、所以我們進入到webpack.prod.conf.js中，然后又require('./webpack.base.conf')

　　3、進入到webpack.base.conf.js中----重點在module.exports中：因為我們現在考慮的是單入口，所以entry一般是main.js，

　　　　對于出口文件中的libraryTarget屬性：共有四個屬性值------umd，amd，commonjs，commonjs2。如果我們想開發一些工具庫，這些庫既可以用commonjs和

amd方式使用也可以用script方式引入。通常我們使用umd方式打包完成之后，瀏覽器可以識別。項目正常運行；但是使用amd方式，會報錯---提示在打包

之后的app.js中define is not defined；使用commonjs方式，會報錯---提示在打包之后的app.js中exports is not defined；使用commonjs2方式，會報錯---提示在打包之后的app.js中module is not defined；

　　注：amd和cmd的依賴是通過define的參數來確定的，比如define('B', ['A'], () => {})就是說當前模塊的名字是B，并且依賴A模塊。但是實際上amd和cmd中，第一個參數不設置，因為設置了會有問題；commonjs的用法規范既是依賴一個模塊就require進來，暴露出這個模塊供其他模塊使用就exports。

　　4、我們最常使用的模塊化方案是commonjs2和umd，前者是為node環境，后者是為瀏覽器環境。如果只是項目的話，libraryTarget屬性可以不加的，如果是產品的話，需要另外討論。

　　5、對externals屬性理解尚淺-----

　　　　　　webpack中如果想不打包引用第三方類庫、框架、自定義插件等，可以設置此屬性；

　　　　　　externals使用場景是外部依賴不需要打包到輸出文件。

　　　　　　externals: {
    　　　　　　jquery: 'jQuery',
　　　　　　}

　　　　最后，對libraryTarget理解也是一種朦朧的狀態。

　　　　 以上。