webpack处理非模块化的几方法

Posted 2020-07-05 稻草人.NET

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

一、使用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   },

二、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/200534
http://www.alloyteam.com/2016/01/webpack-use-optimization
https://www.npmjs.com/package/webpack-zepto