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