Tôi mới sử dụng webpack và muốn sử dụng nó với reactjs nhưng loại bị mất nhầm lẫn ngay bây giờ. Tôi muốn biết làm thế nào css được xử lý trong quá trình phát triển trang web của khách hàng với webpack. Tôi biết rằng webpack bó tất cả các js của tôi và liên kết nó dưới dạng bundle.js mà tôi tham chiếu trong tệp html của tôi như thế này: <script src="http://localhost:3000/assets/bundle.js"></script> dựa trên cấu hình của tôi về webpack-dev-server. Bây giờ, tôi cũng có một tệp css. Nó đi đâu? url của tôi sẽ tham chiếu điều gì trong tệp html của tôi. Tôi hiểu rằng có một bộ nạp kiểu và trình nạp css và cũng là một ExtractTextPlugin, nhưng đầu ra của nó thuộc về đâu? Tôi thấy rằng tôi có thể var css = require('path/customStyle.css') nhưng dường như không thấy nó xuất hiện ở đâu? Tôi làm điều này trong tệp index.jsx của mình. Vì vậy, câu hỏi của ông: Làm thế nào để có được điều này với nhau, mà tôi có thể tham khảo customStyle.css của tôi. Tôi phải làm gì sai, hoặc điều gì làm tôi nhớ Đây là dự án cấu trúc thư mục của tôi:Thiết lập css webpack và thực hành tốt nhất
|_source
| |_js
| |_js
| | |_components
| | |_ *.jsx
| |_index.jsx
|_assets
| |_css
| |_customStyle.css
|__index.html
webpack.config.js của tôi trông như thế này
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")
]
}
tập tin Html trông như thế này:
<!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>
Bất kỳ trợ giúp nào về một số nền tảng về cách hoạt động của cách webpack và cách tạo phong cách của tôi sẽ tuyệt vời.
Đó là câu hỏi cũ 2yr và tôi đoán bạn phải tìm ra giải pháp. Nếu không thì dùng 'extract-text-webpack-plugin',' css-loader', 'html-webpack-plugin' để sắp xếp các tệp HTML, JSX, CSS. – SkrewEverything