Question

我是webpack的新手，想和reactjs一起使用它，但现在有点迷茫。我想知道如何使用webpack在客户端站点开发过程中处理css。我知道webpack捆绑了我所有的js并将它链接为bundle.js，我在我的html文件中引用了这个：<script src="http://localhost:3000/assets/bundle.js"></script>基于我的webpack-dev-server配置。现在，我还有一个css文件。这是怎么回事？什么是我的网址在我的html文件中引用它。我知道有一个样式加载器和一个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方式如何工作以及如何获取样式的背景知识都会很棒。

Answer 1

您的css将与Javascript文件捆绑在一起。您的html中没有要链接的单独css文件。您可以使用extract-text-webpack-plugin为生产创建单独的css文件。

此外，您可能希望避免在您的HTML中添加绝对网址。更好地使用模板并让webpack使用html-webpack-plugin注入正确的脚本标记。这是您的模板可能的样子（例子来自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初学者工具包，看看它是如何完成的。

Answer 2

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

我在我的chapter处详细了解。它显示了各个位如何相互连接。

Answer 3

你不必非常关心使用webpack的css。它所需要的只是它找到了需要的东西。更重要的是您在源文件夹中组织它们的方式。我们有一个大型项目，因为所有组件都变得非常分散。我们决定将常用样式文件放在一个位置，然后将组件特定于组件文件夹下。

Webpack css设置和最佳实践

3 个答案: