0
CSSスタイルシートを持つWordPressプラグインを開発しています。私はGulpからWebpackに移行することを決めました。今後React.jsを使って開発を始めようと思っており、Webpackに慣れていくことはやり始めたことだと思っていました。BrowserSyncは、CSSをインジェクトする代わりにページ全体をリロードします。
私は処理しています。最小化し、.scssファイルを正常に抽出しています。私の.jsファイルと同じです。問題は、.phpファイルが変更されたときにBrowserSyncを使用してページをリロードし、Webpackが新しいdist/* .ssssファイルを作成するたびに変更を挿入しようとしていますが、BrowserSyncはCSSがあるたびにページ全体をリロードしています変化する。奇妙なことは、完全なリロードを行う前に変更を注入していることです。私は変更を.cssファイルを見て、bs.reload（{stream：true}）を実行しようとしましたが、まだ完全なリロードを行います。
何が起こっている可能性がありますか？私は、完全にリロードを行う前に効果的に変更を注入しているので、BrowserSync設定の問題が疑わしいですが、問題の原因となっている設定を特定できません。これはだった...速い、
const path = require('path');
const UglifyJS = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: "../dist/[name].min.css"
});
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/js/main.js',
output: {
filename: 'custom.min.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new UglifyJS({sourceMap: true}),
extractSass,
new BrowserSyncPlugin({
host: 'localhost',
port: '3000',
proxy: 'http://domain.localdev',
open: false,
files: [{
match: ['**/*.php'],
fn: function(event, file) {
if (event === "change") {
const bs = require('browser-sync').get('bs-webpack-plugin');
bs.reload();
}
}
},
{
match: ['dist/*.css', 'dist/*.js'],
fn: function(event, file) {
if (event === "change") {
const bs = require('browser-sync').get('bs-webpack-plugin');
bs.stream();
}
}
}],
injectChanges: true,
notify: true
})
],
externals: {
jquery: "jQuery"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env'],
sourceMap: true
}
}
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}],
fallback: "style-loader"
})
},
{
test: /\.css$/,
loader: 'style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
minimize: true
}
}
]
}
}