Webpack CSS 설정 및 모범 사례

나는 webpack을 처음 사용하기 때문에 reactjs와 함께 사용하고 싶지만 지금은 혼란 스럽다. webpack을 사용하여 클라이언트 사이트 개발 프로세스에서 CSS가 어떻게 처리되는지 알고 싶습니다. 그 webpack 번들 모든 내 js 및 bundle.js이 같은 내 html 파일에서 참조하는 링크 : <script src="http://localhost:3000/assets/bundle.js"></script> webpack-dev-server 내 구성을 기반으로합니다. 이제 CSS 파일도 있습니다. 이게 어디로가는거야? 내 HTML 파일에서 이것을 참조하는 내 URL은 무엇이겠습니까. 스타일 로더와 CSS 로더 및 ExtractTextPlugin이 있지만 출력물은 어디에 속해 있는지 알고 있습니다. 나는 var css = require('path/customStyle.css')을 볼 수는 있었지만 도스가 나타나지 않는 것처럼 보였다. index.jsx 파일에서이 작업을 수행합니다. 그래서 질문 : 자신의 customStyle.css를 참조 할 수 있도록 함께 만드는 방법. 어떤 것은 잘못 I합니까, 아니면 내가 을 무엇을 그리워하는 것은 여기 내 프로젝트 폴더 구조입니다 :Webpack CSS 설정 및 모범 사례

|_source 
| |_js 
|  |_js 
|  | |_components 
|  |  |_ *.jsx 
|  |_index.jsx 
|_assets 
| |_css 
| |_customStyle.css 
|__index.html

내 webpack.config.js이

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './source/js/index.jsx', 
    output: { 
     filename: 'bundle.js', 
     publicPath: 'http://localhost:8090/assets' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract("style-loader","css-loader") 
      } 
     ] 
    }, 
    externals: { 

     'react': 'React' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx','.css'] 
    }, 
    plugins:[ 
     new ExtractTextPlugin("styles.css") 
    ] 
}

HTML 파일은 다음과 같습니다처럼 보인다

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="../node_modules/react/dist/react-with-addons.js"></script> 
<!-- like to link css here but don't know the path to link to --> 
</head> 
<body> 
    <div id="container"> 

    </div> 
    <script src="http://localhost:3000/webpack-dev-server.js"></script> 
    <script src="http://localhost:3000/assets/bundle.js"></script> 

</body> 
</html>

웹팩 방식의 작동 방식과 내 스타일을 얻는 방법에 대한 배경 지식은 환상적입니다.

출처

2015-02-06 silverfighter

2 년 전의 질문입니다. 해결책을 찾았어야합니다. 그렇지 않다면'extract-text-webpack-plugin','css-loader','html-webpack-plugin'을 사용하여 HTML, JSX, CSS 파일을 구성하십시오. – SkrewEverything

귀하의 CSS는 Javascript 파일과 함께 제공됩니다. html로 링크 할 별도의 CSS 파일이 없습니다. extract-text-webpack-plugin을 사용하여 프로덕션을위한 별도의 CSS 파일을 만들 수 있습니다.

또한 절대 URL을 HTML에 넣지 않아도됩니다. 템플릿을 더 잘 사용하고 html-webpack-plugin을 사용하여 webpack에 올바른 스크립트 태그를 삽입하십시오.

<!doctype html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
    <title>Yet Another React Starter Kit</title> 
    <link rel="stylesheet" href="app.{%=o.webpack.hash%}.css" media="all"> 
    </head> 
    <body> 
    <div id="app"></div> 

    <script src="{%=o.htmlWebpackPlugin.assets.main%}"></script> 
    </body> 
</html>

은 내가 어떻게 볼 수있는 YARSK 스타터 키트를 살펴 가지고하는 것이 좋습니다 :이 귀하의 템플릿 (YARSK에서 가져온 예)처럼 보일 수있는 것입니다.

출처

2015-03-29 16:17:17

html-webpack-plugin은 index.html을 생성 할 수 있습니다. 더 많은 사용자 정의가 필요한 경우, 사용하는 템플릿을 사용자 정의 할 수 있습니다. 나는이 플러그인이 실제로 매우 유용하다는 것을 발견했다.

광산 chapter에 대해 자세히 알아 보겠습니다. 다양한 비트가 서로 연결되는 방법을 보여줍니다.

출처

2015-12-17 09:26:55

webpack을 사용하면 CSS에 대해별로 신경 쓸 필요가 없습니다. 필요로하는 것은 그것이 필요로하는 그들을 발견한다는 것입니다. 더 중요한 것은 원본 폴더에서 구성하는 것입니다. 우리에게는 커다란 프로젝트가 있었고, 모든 구성 요소로 인해 꽤 흩어졌습니다. 우리는 하나의 장소에 공통 스타일 파일을 배치하고 컴포넌트 폴더 아래에 특정 컴포넌트 파일을 배치하기로 결정했습니다.

출처

2017-02-25 19:04:44 Janne

Webpack CSS 설정 및 모범 사례

답변

관련 문제