부트 스트랩을 포함하는 동안 Webpack 오류가 발생했습니다.

Question

Webpack을 사용하여 bootstrap.css를 항목 js 파일에 포함하는 동안 문제가 발생합니다.

은 내가

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

그래서 부트 스트랩 LIB, 내가 NPM에서 그것을 얻을 외부 CSS 이름 app.css 및 부트 스트랩 CSS를로드 넣어하는 데 사용되는 항목의 js 파일 이름 app.js를 가지고 그것을 node_modules repo에 저장합니다. 그래서 여기

내가 웹팩를 실행할 때, 나는 구글에 검색하지만 이것에 대한 해결책을 찾을 수 없습니다

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 

오류가 발생 할 수있는 사람의 도움이 내 웹팩 설정

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'] 
    } 
} 

입니다 ? 고급

Answer 1

에서

감사는 너무 부트 스트랩 가져 오는 몇 가지 문제가 있었지만,이 솔루션은

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

그런 다음 entry.js에서 바로 CSS-로더를 실행 해보십시오 ... 나를 위해 작동 I webpack.config.js에서 선택을 취소했습니다.

몰라 왜하지만 당신은 설정에서했던 것처럼 로더를 실행하는 나를 위해 일하지 않는 어느 쪽도 없습니다 :

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