Webpack css设置和最佳实践

我是webpack的新手,并希望将它与reactjs一起使用,但现在却有点迷茫.我想知道如何使用webpack在客户端站点开发过程中处理css.我知道webpack捆绑了我所有的js并将其链接为我在html文件中引用的bundle.js,如下所示：< script src =“http：// localhost：3000 / assets / bundle.js”>< /脚本>基于我对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方式如何工作以及如何获取我的样式的背景知识都会很棒.

解决方法

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

此外,您可能希望避免在您的HTML中添加绝对URL.更好地使用模板并让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入门套件,了解它是如何完成的.

原文链接：https://www.f2er.com/css/242393.html

Webpack css设置和最佳实践

解决方法

猜你在找的CSS相关文章