0
CSS 스타일 시트가있는 WordPress 플러그인을 개발하고 있습니다. React.js로 개발하기 시작할 때부터 Gulp에서 Webpack으로 이동하기로 결정하고 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
}
}
]
}
}