问题描述:全局引用jquery打包到线上可能会不好使。
第一步:
var path = require('path') var webpack = require('webpack') function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: './src/main.js', externals: { 'BMap': 'BMap', // 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT' }, output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /.js$/, loader: 'babel-loader', // include: [resolve('src'), resolve('test'),resolve('/node_modules/swiper/dist')] // include: [path.resolve('src'), path.resolve('test'),path.resolve('node_modules/bootstrap-vue/lib')], exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery", }) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', // '@': resolves('src'), '@': path.resolve('src'), 'swiper': 'swiper/dist/js/swiper.js', }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true, }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }), new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery", }) ]) }
第二部:在main.js里
import $ from 'jquery';
解决问题:出现这个问题是只在plugins:里引入了没有在打包时候引用,要在生产环境里加上
new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery", })