webpack处理非模块化的几方法

webpack处理非模块化文件有几方法，主要分为外链和webpack打包二种情况：

一、使用CDN外部链接的方法

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

如下示例是把微信的JSSDK和zepto使用外链的方法在页面上使用script引用,并导出别名

 module.exports = {
   entry: {
     app: './src/main.js',
     vendors: ['vue', 'vue-router', 'vue-touch', 'fastclick', 'moment']
   },
   output: {
     path: path.resolve(__dirname, '../dist/static'),
     publicPath: './static/',
     filename: '[name].js'
   },
   // CDN
   externals: {
     'zepto':'$',
     'wx': 'jWeixin'
   },

二、webpack打包在一起的方法

官网文档Shimming: https://webpack.github.io/docs/shimming-modules.html

如下示例是还是使用zepto，需要用到webpack-zepto这个模块，为了统一成import $ from 'zepto' ，使用webpack别名的配置alias指定zepto的路径。如此构建的时候会打包在build.js中

   resolve: {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
       'src': path.resolve(__dirname, '../src'),
       'moment': path.join(__dirname, '../node_modules/moment/min/moment-with-locales.min.js'),
       'zepto': path.join(__dirname, '../node_modules/webpack-zepto/index.js')
     }
   },

   plugins: [
     new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js'),
     new webpack.ProvidePlugin({
       $: 'zepto',
       Zepto: 'zepto',
       'window.Zepto': 'zepto'
     })
   ],

相关参考资料：
http://www.ituring.com.cn/article/200534
http://www.alloyteam.com/2016/01/webpack-use-optimization
https://www.npmjs.com/package/webpack-zepto