web-dev-qa-db-ja.com

sassのwebpackライブホットリロード

反応スターターのワークフローを構築しているので、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')
);

そして私のアプリコンポーネント

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



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

export default App;
javascriptwebpacksasswebpack-dev-serverhot-reload
7
Vladimir Mujakovic

実際、style-loaderは、CSS HMRの responsible であるものです。

Devの場合のみ、スタイルパイプラインの最後に追加する必要があります。本番環境では、構成を維持できます。

次のようになります。

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を使用している場合）.

9
felixmosh

Webpackの代わりに Parcel を使用してみてください。以前は、Webpackの設定に何時間も費やして、ホットリロードが機能するようにしました。パーセルを使用すると、ほとんどのものは設定ファイルなしで「機能」します。たとえば、Pugテンプレートの使用を開始したいと考えていました。パーセルは.pug拡張機能と必要なNPM依存関係を自動的にダウンロードしました！

この場合、次のようにアプリにSCSSファイルを含めるだけです：import '../scss/style.scss'（パスが.scss index.jsに関連するソースファイル。パーセルは自動的に「賢明な」ことを行います。

以下は、Parcel + React + SASS：

Parcel対WebPackの顕著な利点と欠点：

  • 区画には最小限の構成が必要です。多くの場合、構成はありません。
  • 通常、ParcelはWebPackよりもはるかに高速に構築されます。
  • WebPack開発サーバーはより安定しているようです。 （Parcel devサーバーは時々再起動する必要があり、DropboxでNiceを再生しません。どうやらこれはバージョン2.0で修正されるはずです。）
  • （一般的ではない）構成が必要な場合、Parcelでそれを行う方法は明らかではないかもしれません。少なくともWebPackでは、すべての構成は1か所にあります。
  • 時々、Parcelの自動設定は、人々が予期しないことを行い、混乱させます。
0
Leftium
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に3つの属性を追加します。エントリは、アプリケーションのメインファイルがどこにあるかをWebpackに伝えます。

entry: './index.js'

2つ目はモジュールで、外部の依存関係をロードする方法をWebpackに指示します。ローダーと呼ばれる属性があり、ファイルタイプごとに特定のローダーを設定します。

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

.js正規表現に一致するファイルはbabel-loaderを使用してロードされ、バンドルにトランスロードおよびロードされると言っています。ローダー配列の2番目のエントリは、CSSファイルがインポートされたときに何をするかをWebpackに指示し、CSSモジュールをアクティブにするためにモジュールフラグを有効にしてcss-loaderを使用します。次に、変換の結果がスタイルローダーに渡され、スタイルローダーがページのヘッドにスタイルを挿入します。

最後に、ページを生成するためにHTMLプラグインを有効にします。

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

plugins: [new HtmlWebpackPlugin()]
0
Yilmaz