包含引导程序 3 时出现 Webpack 错误

Question

我在使用 Webpack 将 bootstrap.css 包含到我的入口 js 文件中时遇到了问题。

我有一个入口js文件，命名为app.js，用于加载外部css名称app.css和bootstrap css

require("../node_modules/bootstrap/dist/css/bootstrap.css");
require("../css/app.css");

所以 bootstrap 库，我从 npm 获取它并将其放入 node_modules 存储库中。

这是我的 webpack 配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
    context: path.resolve('js'),
    entry: ["./app.js"], 
    output: {
        path: path.resolve('build/js/'),
        publicPath: '/assets/js/',  
        filename: "bundle.js"
    },
    devtool: "source-map",
    devServer: {
        contentBase: 'public'
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /\.es6\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                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" }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.es6.js']
    }
}

当我运行 webpack 时，发生了错误

ERROR in ../~/bootstrap/dist/css/bootstrap.css
Module parse failed: /front-end/Webpack/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)
    at Parser.pp$4.raise (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseTopLevel (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/front-end/Webpack/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/front-end/Webpack/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/front-end/Webpack/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /front-end/Webpack/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
 @ ./app.js 3:0-59

我在谷歌上搜索过，但找不到解决方案，有人可以帮忙吗？

提前致谢

Answer 1

我在导入引导程序时也遇到了一些问题，但是这个解决方案对我有用... 尝试直接从 entry.js 运行 css-loader

require("!style!css!./node_modules/bootstrap/dist/css/bootstrap.min.css");

然后我从 webpack.config.js 中取消选中它。

不知道为什么，但是像从配置中那样运行加载程序对我也不起作用：

/*
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
*/