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