15

我正在为反应启动器构建工作流程，并希望在我对我的 scss 文件进行更改时让我的浏览器自动重新加载。

目前，当我对 index.js 文件（设置为我的入口点）进行更改时，webpack 将热重新加载。但是，当我在我的 scss 文件中更改/添加 scss 代码时，它会被编译，但 css 不会在任何地方得到输出，也不会触发浏览器重新加载。

我是 webpack 的新手，我真的很感激这里的一些见解。

这是我的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/index_bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'    
        })
    ]
}

我的 index.js 入口点文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';


ReactDOM.render(
    <App/>,
    document.getElementById('App')
);

还有我的 App 组件

import React, {Component} from 'react';
import '../../dist/css/style.css';



class App extends Component {
    render() {
        return (
            <div>
                <p>Test</p>         
            </div>
        )
    }
}

export default App;
4

3 回答 3

23

实际上，style-loader是负责CSS HMR 的那个。

您应该将它添加到样式管道的末尾，仅用于开发。对于生产，您可以保留您的配置。

它应该看起来像这样：

const devMode = process.env.NODE_ENV !== 'production'

{
  test: /\.scss$/,
  use: [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader'
    },
    {
      loader: 'postcss-loader'
    },
    {
      loader: 'sass-loader'
    }
  ]
}

请注意，将 css 提取到单独文件中的最佳做法是，MiniCssExtractPlugin如果您使用的是 webpack 4，或者ExtractTextWebpackPlugin，如果您使用的是 webpack < 4。

于 2018-08-27T19:07:55.183 回答
0 
npm install --save-dev style-loader CSS-loader
npm install --save-dev html-webpack-plugin

在 package.json 中添加一个 npm 脚本来运行 webpack-dev-server：

"scripts": { 
  "start": "webpack-dev-server" 
},

Webpack 需要一个配置文件来知道如何处理您在我们的应用程序中使用的不同类型的依赖项，为此创建一个名为 webpack.config.js 的文件，在 webpack.config.js 中添加三个属性：第一个是entry，它告诉 Webpack 我们的应用程序的主文件在哪里：

entry: './index.js'

第二个是模块，这是我们告诉 Webpack 如何加载外部依赖项的地方。它有一个名为 loaders 的属性，我们为每种文件类型设置一个特定的加载器：

module: { 
 loaders: [ 
{ 
  test: /\.js$/, 
  exclude: /(node_modules|bower_components)/, 
  loader: 'babel', 
  query: { 
    presets: ['es2015', 'react'], 
  } 
}, 
{ 
  test: /\.css$/, 
  loader: 'style!css?}]}

我们说匹配 .js 正则表达式的文件是使用 babel-loader 加载的，以便它们被转译并加载到包中。loaders 数组中的第二个条目告诉 Webpack 在导入 CSS 文件时要做什么，它使用启用 modules 标志的 css-loader 来激活 CSS 模块。然后将转换的结果传递给样式加载器，后者将样式注入页面的头部。

最后，我们启用 HTML 插件以便为我们生成页面。

const HtmlWebpackPlugin = require('html-webpack-plugin') 

plugins: [new HtmlWebpackPlugin()]
于 2019-06-05T02:34:23.090 回答
-3

尝试使用Parcel而不是 Webpack。我曾经花费数小时配置 Webpack 以使诸如热重载之类的工作正常工作。使用 Parcel，大多数事情都可以在没有配置文件的情况下“工作”。例如，我想开始使用 Pug 模板。Parcel 识别了.pug扩展并自动下载了所需的 NPM 依赖项！

在您的情况下，只需在您的应用程序中包含 SCSS 文件，如下所示：（import '../scss/style.scss'注意路径是.scss相对于 index.js 的源文件）。Parcel 会自动做“明智”的事情。

以下是 Parcel + React + SASS 入门的一些参考资料：

Parcel 与 WebPack 的显着优缺点：

  • Parcel 需要最少的配置；经常没有配置。
  • Parcel 的构建速度通常比 WebPack 快得多。
  • WebPack 开发服务器似乎更稳定。（Parcel 开发服务器需要偶尔重新启动一次，并且不能与 Dropbox 配合使用。显然这应该在 2.0 版中修复。）
  • 当需要（不常见的）配置时，如何在 Parcel 中进行配置可能并不明显；至少在 WebPack 中，所有的配置都在一个地方。
  • 有时 Parcel 的自动配置会做出人们意想不到的事情，让他们感到困惑。
于 2019-05-30T10:47:04.343 回答