我正在使用Browser Sync与webpack-dev-server，并且在使用browser sync时遇到问题..!! 只有表单填充有效，点击、滚动在browser sync中不起作用，并且没有任何编译时错误发生，但是上述事情都不起作用..!! 这是我的"Webpack.dev.js"文件，那么这里出了什么问题..?
const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = function (options) {
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: helpers.hasProcessFlag('hot'),
PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT
});
return webpackMerge(commonConfig({ env: ENV, metadata: METADATA }), {
output: {
path: helpers.root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[file].map',
chunkFilename: '[id].chunk.js',
library: 'ac_[name]',
libraryTarget: 'var',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: [helpers.root('src', 'styles')]
},
]
},
plugins: [
new EvalSourceMapDevToolPlugin({
moduleFilenameTemplate: '[resource-path]',
sourceRoot: 'webpack:///'
}),
new NamedModulesPlugin(),
new LoaderOptionsPlugin({
debug: true,
options: { }
}),
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
host: 'localhost',
port: 4000,
proxy: 'http://localhost:3000'
},
{
reload: false
})
],
devServer: {
port: METADATA.port,
host: METADATA.host,
hot: METADATA.HMR,
public: METADATA.PUBLIC,
historyApiFallback: true,
watchOptions: {
ignored: /node_modules/
},
setup: function(app) {
// For example, to define custom handlers for some paths:
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
},
},
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false,
fs: 'empty'
}
});
};