模块解析失败：意外的令牌（7：5）您可能需要适当的加载程序来处理此文件类型。 ：Webpack，Bootstrap

Question

I'm getting an error when running webpack --config webpack.config.vendor.js in an Aurelia app.

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.

I'm using Webpack 3.8.1

Webpack.config.js

    //var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
const { AureliaPlugin } = require('aurelia-webpack-plugin');
var extractStyles = new (require('extract-text-webpack-plugin'))('mystyles.css');

var bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {

    return [{
        stats: { modules: false },
        entry: { 'app': 'aurelia-bootstrapper' },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['ClientApp', 'node_modules'],
        },
        output: {
            path: path.resolve(bundleOutputDir),
            publicPath: '/dist',
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
                { test: /\.html$/, loader: 'html-loader' },
                { test: /\.scss$/, loader: extractStyles.extract('css-loader!sass-loader') },
                { test: /\.css$/,  loader: 'style-loader!css-loader' },
                { test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
                { test: /\.json$/, loader: 'json-loader' }
            ]
        },
        plugins: [
            extractStyles,

            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new AureliaPlugin({ aureliaApp: 'boot' })

        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only 
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
            // ,
            //   new BundleAnalyzerPlugin({
            //     analyzerMode: 'static'
            // })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
    }];
}

webpack.config.js

    var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = (env) => {
    return [{
        stats: { modules: false },
        resolve: {
            extensions: ['.js']
        },
        module: {
            rules: [{
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                },{
                    loader: 'expose-loader',
                    options: '$'
                }]
            }],
            loaders: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
                { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
            ]
        },
        entry: {
            vendor: [
                'aurelia-event-aggregator',
                'aurelia-fetch-client',
                'aurelia-framework',
                'aurelia-history-browser',
                'aurelia-logging-console',
                'aurelia-pal-browser',
                'aurelia-polyfills',
                'aurelia-route-recognizer',
                'aurelia-router',
                'aurelia-templating-binding',
                'aurelia-templating-resources',
                'aurelia-templating-router',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'jquery',
                'noty'
            ],
        },
        output: {
            path: path.join(__dirname, 'wwwroot', 'dist'),
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]',
        },
        plugins: [
            extractCSS,
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
        ])
    }];
}

Answer 1

Moving the entries in the "loaders" section into "rules" as below fixed the issue. I believe loaders has been deprecated in Webpack 3

 rules: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }]