webpack import 'bootstrap/dist/css/bootstrap.css' 报错

Question

webpack.config.js里做了如下配置
//当前路径
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

devtool:'eval-source-map', //打包调试，生产环境需要去掉
mode: "development", // "production" | "development" | "none"
entry: {
    main: "./src/js/main.js",
    test: "./src/js/page/test.js"
}, //入口文件
output: {
    path: path.resolve(__dirname, "dist/js"), // 所有输出文件的目标路径.必须是绝对路径（使用 Node.js 的 path 模块）
    filename: '[name].js', //输出文件的名字
},
module: {
    // 加载器配置
    rules: [
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
        },{
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
            }
        },{
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
            }
        },{
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: "jQuery"
            }, {
                loader: 'expose-loader',
                options: "$"
            }]
        }, {
            test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            use: 'url?limit=10000&mimetype=application/font-woff'
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: 'url?limit=10000&mimetype=application/octet-stream'
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: 'file'
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: "url?limit=10000&mimetype=image/svg+xml"
        }, {
            test:  /\.(scss|sass)$/,
            use: [
            {
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            },{
                loader: 'sass-loader'
            }]
        },{
            test:/\.css$/,
            exclude: /node_modules/,
            include: [
                path.resolve(__dirname, "not_exist_path")
            ],
            use:['style-loader','css-loader']
        }
    ]
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
    })
]

}
入口main.js
import 'src/css/test.css' 这里引用有效果
import 'bootstrap/dist/css/bootstrap.css' 加多这行报错

找不到问题所在。网上也查了好久。

Answer 1

很明显，你的 webpack 里的 module->rules 配置，有关css的，去掉 exclude 即可，因为你的 bootstrap是包含在 node_modules里的