Webpack 모두 CSS와 js 파일을 구축

Question

내 문제는 webpack은 입력이 sass 파일 일 때 js와 css 파일을 모두 빌드한다는 것입니다. 여기에 무엇입니까 webpack outputs입니다. 나는 CSS 파일을 출력하기를 원한다. 어떻게해야할지 모르겠다. 누군가가 도울 수 있기를 바랍니다. 내 코드는 다음과 같습니다.

let path = require("path"); 
let webpack = require("webpack"); 
let ExtractTextPlugin = require("extract-text-webpack-plugin"); 

let SRC = path.join(__dirname, "client", "src"); 
let DIST = path.join(__dirname, "client", "dist", "bundles"); 

module.exports = [{ 
    entry: { 
     admin: SRC + "/js/admin/index.js", 
     main: SRC + "/js/main/index.js", 
     adminstyles: SRC + "/scss/admin/index.scss", 
     mainstyles: SRC + "/scss/main/index.scss" 

    }, 
    output: { 
     path: DIST, 
     filename: "[name]-bundle.js" 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
       name: 'commons', 
       filename: 'common.js', 
       chunks: ['admin', 'main'] 
      } 
     ), 
     new ExtractTextPlugin("[name]-bundle.css") 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("css!sass") 
      }, 
      {test: /\.jsx?$/, loader: "babel-loader"} 
     ] 
    }, 
    resolve: { 
     extensions: ["", ".js", ".jsx"], 
     root: [path.join(__dirname, "client", "src", "js", "main")], 
     modulesDirectories: ["node_modules"] 
    } 
}]; 

Answer 1

모든 진입 점은 콘텐츠가 extract-text-webpack-plugin로 추출되는 경우에도 웹팩 부트 스트랩 코드와 자바 스크립트 번들을 가져옵니다. CSS에 대해 별도의 엔트리 포인트를 사용하는 대신 해당 엔트리 포인트에 해당 엔트리 포인트를 포함시켜야합니다.이 엔트리 포인트는 스타일이 개념적으로 사용되기 때문에 의미가 있습니다. 각 entry도 배열을 허용합니다.

귀하의 항목은 다음과 같아야합니다

entry: { 
    admin: [SRC + "/js/admin/index.js", SRC + "/scss/admin/index.scss"], 
    main: [SRC + "/js/main/index.js", SRC + "/scss/main/index.scss"] 
}, 

당신도 변경할 수 있습니다 adminstyles 이름 mainstyles을 유지하고 싶은 경우 extract-text-webpack-plugin에 :

new ExtractTextPlugin("[name]styles-bundle.css")