webpack 应用 jquery $未定义

Question

webpack 应用 jquery $未定义但是window.jquery是有值的
webpack.config.js中的代码
var path = require('path');
var webpack = require('webpack');
//用来抽离css的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {

entry: './src/main.js',
output: {
    libraryTarget: 'umd',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},
//打包去除外部依赖
externals: {
    'vue': {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
    },
    'lodash': {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_'
    },
    'jquery': 'window.jQuery',

},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
                    })
                }
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'url-loader',
            options: {
                name: "image/[name].[ext]?[hash]",
                limit: 8192
            }
        },
        {
            test: /\.(less|css)$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {loader: "css-loader"},
                    {loader: "less-loader"}
                ],
            })
        },

    ]
},
plugins: [
    new ExtractTextPlugin("css/styles.css"),
    // new webpack.ProvidePlugin({
    //     jQuery:'jquery',
    //     'window.jQuery': 'jquery',
    //     'window.$': 'jquery',
    //     $: 'jquery',
    // }),
],
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
},
devServer: {
    historyApiFallback: true,
    noInfo: 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
    })
])

}

页面中用<script src="js/jquery-3.2.1.js"></script>引用的

Answer 1

这个报错的原因在于可能你用的jq不支持模块化引入
可以尝试在webpack配置文件的module的rules中
添加
{

test: require.resolve('jQuery'),
loader: 'exports-loader?window.jQuery!script-loader'

}

然后需要用的地方 import $ from 'jQuery'即可