Webpack css设置和最佳实践

Question

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-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

Run Code Online (Sandbox Code Playgroud)

我的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")
    ]
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

任何关于webpack方式如何工作以及如何获取我的样式的背景知识都会很棒.

Answer 1

Thi*_*man 4

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

另外，您可能希望避免在 html 中放置绝对网址。更好地使用模板，并使用 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>

Run Code Online (Sandbox Code Playgroud)

我建议看一下YARSK入门套件，看看它是如何完成的。

归档时间：	10 年，9 月前
查看次数：	11662 次
最近记录：	8 年，9 月前