Question

我正在为React Starter建立工作流程，并希望在对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;

Answer 1

实际上，style-loader是CSS HMR的responsible。

您应该将其添加到样式管道的最后，仅适用于开发人员。对于生产，您可以保留您的配置。

它看起来应该像这样：

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。

Answer 2

尝试使用Parcel代替Webpack。我过去常常花费数小时来配置Webpack，以使诸如热重装之类的工作正常进行。使用Parcel，大多数情况下无需配置文件即可“工作”。例如，我想开始使用Pug模板。包裹识别了.pug扩展名，并自动下载了所需的NPM依赖项！

在您的情况下，只需将SCSS文件包括在您的应用中，如下所示：import '../scss/style.scss'（注意，路径是相对于index.js的.scss源文件）。包裹将自动执行“明智的”操作。

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

Parcel与WebPack的明显优缺点：

包裹需要最少的配置；通常没有配置。
包裹的构建通常比WebPack快得多。
WebPack开发服务器似乎更稳定。（Parcel开发服务器需要偶尔重新启动，并且不能与Dropbox配合使用。显然，这应该在2.0版中得到解决。）
当需要（不常见的）配置时，如何在Parcel中进行配置可能并不明显；至少在WebPack中，所有配置都在一个地方。
有时，Parcel的自动配置会让人感到意外，使他们感到困惑。

Answer 3

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中添加三个属性：第一个是条目，它告诉Webpack我们应用程序的主文件在哪里：

entry: './index.js'

第二个是模块，在这里我们告诉Webpack如何加载外部依赖项。它具有一个称为加载程序的属性，我们在其中为每种文件类型设置一个特定的加载程序：

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

我们说的是，使用babel-loader加载与.js regex匹配的文件，以便将它们编译并加载到包中。加载器数组中的第二个条目告诉Webpack导入CSS文件时的操作，它使用css-loader并启用了模块标志来激活CSS模块。转换的结果然后传递到样式加载器，该样式加载器将样式注入到页面的顶部。

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

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

plugins: [new HtmlWebpackPlugin()]

webpack sass实时热重装

3 个答案: