由于进行了一些更新，我以前的工作设置不再能按预期运行。当我运行yarn start时，WDS会第一次查找文件更改并进行正确的更新，但是即使WDS确认文件更改，该文件的任何其他更改也不会发送到浏览器。这是我当前的配置
const path = require('path');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
require('babel-polyfill');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '/Zeus/src'),
build: path.join(__dirname, '/Zeus/dist'),
};
const common = {
entry: {
index: [
'babel-polyfill',
PATHS.app,
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss'],
},
output: {
path: PATHS.build,
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[id].[chunkhash].js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
include: PATHS.app,
use: {
loader: 'babel-loader',
},
},
{
test: /flickity/,
loader: 'imports-loader?define=>false&this=>window',
}
],
},
plugins: [
new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
],
};
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === 'development',
});
//
// Developmemt configuration
//
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: path.join(__dirname, '/Zeus'),
historyApiFallback: true,
hot: true,
// hotOnly: true,
clientLogLevel: 'info',
// stats: 'errors-only',
host: '0.0.0.0',
port: 8080,
},
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
// use style-loader in development
fallback: 'style-loader',
}),
}],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
extractSass,
],
});
}
通常，这意味着我将取消该过程并重新开始。哪个可行，但显然不是很方便。
[编辑] 为了包括我的目录结构，它如下：
/
webpack.config.js
/Zeus
/dist
/src
index.js
我正在使用webpack: ^4.29.6。
[编辑以包含pck文件]
{
"name": "zeus",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --progress",
"start": "webpack-dev-server --debug",
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-1": "^7.0.0",
"@babel/preset-stage-3": "^7.0.0",
"@babel/register": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"axios-mock-adapter": "^1.16.0",
"babel-eslint": "10",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^2.1.0",
"enhanced-resolve": "^4.1.0",
"enzyme": "^3.9.0",
"es6-promise-promise": "^1.0.0",
"eslint": "5.x",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"imports-loader": "^0.8.0",
"install": "^0.12.2",
"istanbul": "1.0.0-alpha.2",
"jquery": "^3.3.1",
"jsdom": "^14.0.0",
"mocha": "^6.0.2",
"mock-local-storage": "^1.1.8",
"nock": "^10.0.6",
"node-sass": "^4.11.0",
"offline-plugin": "^5.0.6",
"phantomjs": "^2.1.7",
"plato": "^1.7.0",
"react-addons-test-utils": "^15.6.2",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tapable": "^1.1.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"watchpack": "^1.6.0",
"webpack": "^4.29.6",
"webpack-chunk-hash": "^0.6.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-sources": "^1.3.0"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-runtime": "^7.3.4",
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.24.1",
"enzyme-adapter-react-16": "^1.10.0",
"es6-promise": "^4.2.6",
"flickity": "^2.2.0",
"history": "^4.7.2",
"isomorphic-fetch": "^2.2.1",
"jest": "^24.3.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"moxios": "^0.4.0",
"npm-check-updates": "^3.1.7",
"prop-types": "^15.7.2",
"query-string": "^6.2.0",
"react": "^16.8.3",
"react-async-script": "^1.0.0",
"react-async-script-loader": "^0.3.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.8.3",
"react-ga": "^2.5.7",
"react-google-login": "^5.0.2",
"react-infinite-scroller": "^1.2.4",
"react-loadable": "^5.5.0",
"react-masonry-component": "^6.2.1",
"react-modal": "^3.8.1",
"react-redux": "^7.0.1",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-router-scroll": "^0.4.4",
"react-sticky": "^6.0.3",
"react-waypoint": "^9.0.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-promise": "^0.6.0",
"redux-saga": "^1.0.2",
"redux-storage": "^4.1.2",
"redux-thunk": "^2.3.0"
}
}