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文件中引用这个。我知道有一个样式加载器和一个CSS加载器，也是一个ExtractTextPlugin，但输出属于哪里？我看到我可以var css = require('path/customStyle.css')但似乎没有看到它出现在哪里？我在我的index.jsx文件中这样做。所以他的问题：如何把它们放在一起，我可以引用我的customStyle.css。我该怎么办错了，还是什么我错过这里是我的项目文件夹结构：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>

任何有关webpack方式如何工作以及如何让我的风格的背景的帮助将是太棒了。

来源

2015-02-06 silverfighter

这是2年前的问题，我想你一定找到了解决办法。如果不是，那么使用'extract-text-webpack-plugin'，'css-loader'，'html-webpack-plugin'来组织HTML，JSX，CSS文件。 – SkrewEverything 2017-09-26 13:17:18

您的css将与Javascript文件捆绑在一起。没有单独的CSS文件链接在您的HTML。您可以使用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-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安装和最佳实践

回答

相关问题