Vue2.0---webpack打包知識點-2

標籤：流程   屬性   mon   識別   方式   bpa   nbsp   query   json   

　　先貼一篇對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理解也是一種朦朧的狀態。

　　　　 以上。

 

Vue2.0---webpack打包知識點-2