Question

所以我构建了以下webpack配置文件（which I got from this repo)：

现在，当我运行 gulp serve 和 node index.js 时，我收到以下错误：

未捕获的ReferenceError：jQuery未定义transition.js？9b13：59

如何修改webpack以便正确配置jQuery以使用Angular和bootstrap？甚至连bootstrap css都没有出现，我也很困惑，因为这并不涉及jQuery。

var path              = require('path');
var webpack           = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var appRoot           = path.join(__dirname, '/src');
var bowerRoot         = path.join(__dirname, '/bower_components');
var bootstrapPath     = path.join(__dirname, '/bower_components/bootstrap/less/bootstrap');

module.exports = {
    cache: true,
    debug: true,
    singleRun: true,

    // The entry point
    entry: [
        path.join(appRoot, '/app/app.js')
    ],

    output: {
        path: path.join(__dirname, './static'),
        publicPath: './',
        filename: '[hash].bundle.js',
        chunkFilename: '[chunkhash].js'
    },


    module: {
        loaders: [
            {
                test: /\.less$/, loader: 'style!css!less'
            },
            {
                // require raw html for partials
                test: /\.html$/, loader: 'ng-cache'
            },
            {
                test: /\.json$/, loader: 'json'
            },
            {
              test: /\.css$/, loader: 'style-loader!css-loader'
            },
            {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
            },
            {
              test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000"
            },
            {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"
            },
            {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"
            }
        ],

        // don't parse some dependencies to speed up build.
        noParse: [
            path.join(bowerRoot, '/angular-ui-router'),
            path.join(bowerRoot, '/angular-mocks'),
            path.join(bowerRoot, '/angular'),
            path.join(bowerRoot, '/less')
        ],
    },

    resolve: {
        alias: {
            bower: bowerRoot,
            'bootstrap.less': bootstrapPath 

        },

        extensions: [
            '',
            '.js',
            '.less',
            '.css'
        ],

        root: [appRoot],
        moduleDirectories: [bootstrapPath]
    },


    plugins: [
        // bower.json resolving
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
        ], ['normal', 'loader']),

        // disable dynamic requires
        new webpack.ContextReplacementPlugin(/.*$/, /a^/),

        new webpack.ProvidePlugin({
            'angular': 'exports?window.angular!bower/angular',
        }),

        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html'
        }),

    ],

};

Answer 1

您已使用ProvidePlugin。所以，你只需要添加JQuery：

new webpack.ProvidePlugin({
    'angular': 'exports?window.angular!bower/angular',
    '$': "jquery",
    'jQuery': "jquery"
})

如何使用此webpack.config.js文件加载jQuery？

1 个答案: