6

我是 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 方式如何工作以及如何让我的样式进入的背景的帮助都会很棒。

4

3 回答 3

4

您的 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入门套件，看看它是如何完成的。

于 2015-03-29T16:17:17.347 回答
2

html-webpack-plugin可以为你生成index.html。如果您需要更自定义的内容，它允许您自定义它使用的模板。我发现这个插件在实践中非常有用。

我将在我的一章中进行更详细的介绍。它显示了各种位如何相互连接。

于 2015-12-17T09:26:55.013 回答
0

你不必太关心带有 webpack 的 css。它所需要的只是通过 require 找到它们。更重要的是您在源文件夹中组织它们的方式。我们有一个大型项目，由于所有组件都变得非常分散。我们决定将通用样式文件放在一个地方，然后在组件文件夹下特定于组件。

于 2017-02-25T19:04:44.140 回答