webpack處理非模塊化的幾方法

webpack處理非模塊化文件有幾方法，主要分爲外鏈和webpack打包二種狀況：

1、使用CDN外部連接的方法

官網文檔External: https://webpack.github.io/docs/library-and-externals.html

以下示例是把微信的JSSDK和zepto使用外鏈的方法在頁面上使用script引用,並導出別名

 1 module.exports = {
 2   entry: {
 3     app: './src/main.js',
 4     vendors: ['vue', 'vue-router', 'vue-touch', 'fastclick', 'moment']
 5   },
 6   output: {
 7     path: path.resolve(__dirname, '../dist/static'),
 8     publicPath: './static/',
 9     filename: '[name].js'
10   },
11   // CDN
12   externals: {
13     'zepto':'$',
14     'wx': 'jWeixin'
15   },

2、webpack打包在一塊兒的方法

官網文檔Shimming: https://webpack.github.io/docs/shimming-modules.html

以下示例是仍是使用zepto，須要用到webpack-zepto這個模塊，爲了統一成import $ from 'zepto' ，使用webpack別名的配置alias指定zepto的路徑。如此構建的時候會打包在build.js中

 1   resolve: {
 2     extensions: ['', '.js', '.vue'],
 3     fallback: [path.join(__dirname, '../node_modules')],
 4     alias: {
 5       'src': path.resolve(__dirname, '../src'),
 6       'moment': path.join(__dirname, '../node_modules/moment/min/moment-with-locales.min.js'),
 7       'zepto': path.join(__dirname, '../node_modules/webpack-zepto/index.js')
 8     }
 9   },
10 
11   plugins: [
12     new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js'),
13     new webpack.ProvidePlugin({
14       $: 'zepto',
15       Zepto: 'zepto',
16       'window.Zepto': 'zepto'
17     })
18   ],

相關參考資料：http://www.ituring.com.cn/article/200534http://www.alloyteam.com/2016/01/webpack-use-optimizationhttps://www.npmjs.com/package/webpack-zepto