Webpack css 设置和最佳实践
Posted
技术标签:
【中文标题】Webpack css 设置和最佳实践【英文标题】：Webpack css setup and best practise 【发布时间】：2015-04-07 00:09:21 【问题描述】：我是 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-loader 以及一个 ExtractTextPlugin，但是输出属于哪里？我看到我可以var css = require('path/customStyle.css') 但似乎没有看到它出现在哪里？我在我的 index.jsx 文件中执行此操作。
所以他的问题是：如何把它放在一起，我可以参考我的 customStyle.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>
任何有关 webpack 方式如何工作以及如何获取我的样式的背景的帮助都很棒。
【问题讨论】：
这是 2 年前的问题，我想您一定找到了解决方案。如果没有，则使用extract-text-webpack-plugin、css-loader、html-webpack-plugin 来组织 HTML、JSX、CSS 文件。
【参考方案1】：
您的 css 将与 javascript 文件捆绑在一起。您的 html 中没有可链接的单独 css 文件。您可以使用 extract-text-webpack-plugin 为生产创建单独的 css 文件。
此外，您可能希望避免在 html 中放置绝对 url。最好使用模板并通过使用 html-webpack-plugin 让 webpack 注入正确的脚本标签。这就是您的模板可能的样子（来自 YARSK 的示例）：
<!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 入门工具包，看看它是如何完成的。
【讨论】：
【参考方案2】：html-webpack-plugin可以为你生成index.html。如果您需要更多自定义的东西，它允许您自定义它使用的模板。我发现这个插件在实践中非常有用。
我会在我的chapter 上详细介绍。它显示了各种位如何相互连接。
【讨论】：
【参考方案3】：你不必太关心带有 webpack 的 css。它所需要的只是通过 require 找到它们。更重要的是您在源文件夹中组织它们的方式。我们有一个大型项目，由于所有组件都变得非常分散。我们决定将常用的样式文件放在一个地方，然后在组件文件夹下放置特定的组件。
【讨论】：
以上是关于Webpack css 设置和最佳实践的主要内容，如果未能解决你的问题，请参考以下文章