9

webpack-hot-middlewareNode.js サーバーでとwebpack-dev-middlewareライブラリの両方を使用して、Webpack ホット リロードを利用できる TypeScript で記述されたプロジェクトがあります。

また、パブリック ディレクトリに 1 つの CSS ファイルを生成する Stylus コード (Gulp を使用したインクリメンタル ビルド) 用に構成されたすべてのビルド手順が既にあります。

したがって、TypeScript のものには既に Webpack のホット リロードがあるので、CSS にも Webpack のホット リロードを利用したいと思いますが、CSS ファイルをビルドしたくありません。理想的には、単一の CSS ファイルが変更されるたびに Webpack がホット リロードするようにしたいだけです。それを達成するための最も簡単で最良の方法は何ですか？

現在の構成ファイルは次のようになります。

const webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './src/client/index.tsx'
  ],
  output: {
    path: '/public/js/',
    filename: 'bundle.js',
    publicPath: '/js/'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ];
};

そして、Webpack Hot Middleware と Webpack Dev Middleware を次のように使用します。

const webpackConfig = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
4

1 に答える 1

1

既に持っている設定とは別に、HMR が css ファイルを処理するために特別なことをする必要はないと思います。ただし、Webpack は CSS をアプリケーションの依存関係として認識する必要があります。JavaScript で 1 つ以上の css ファイルを要求 (またはインポート) することができます。そうすることで、アプリケーションの依存関係ツリーの一部になります。

標準的なセットアップでは、css-loader を使用するように .css ファイルを一致させ、出力に出力する前にトランスパイルしますが、Webpack に css を触らせたくないので、代わりに file-loader を使用できます。Webpack は引き続きファイルを依存関係として取得しますが、その内容には触れずに単に出力ディレクトリにコピーします。

require("file!./styles.css");アプリケーションのメイン ファイルに次のように入力します。これにより、css ファイルでファイル ローダーを使用するように指示されます。file-loaderNPM は Webpack の一部ではないため、NPM とともにインストールする必要があります。

于 2016-05-27T17:25:05.293 に答える