使用webpack --watch时，在[src / components / Main /]中不会选择.pcss（PostCSS）文件的更改。对.js文件的更改以及其他目录中的.pcss文件都很好。因为我的Web应用程序是同构的，ExtractTextPlugin用于将所有CSS压缩在一起并将其推送到单个文件中。
这是在macOS 10.12.X上。
webpack.config.js：
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const babelPresetEnvExclude = require('./config/babel-preset-env.exclude')
const babelPluginRelay = ['relay', { schema: 'data/schema.graphqls', }]
const styleRules = {
test: /\.p?css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
'postcss-loader',
],
}),
}
const fileRules = {
test: /\.((pn|sv|jpe?)g|gif)$/,
use: ['file-loader'],
}
const server = {
target: 'node',
entry: './build/unbundled/server.js',
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
// Overwrites the same file created by the browser webpack config. A loader
// needs to be specified to take care of the import statements and it wont
// work without also outputting a file. There has to be a better way to
// handle this, but I want to focus on other parts for now.
// @todo: make this less bad.
new ExtractTextPlugin('public/main.css'),
]
}
const browser = {
target: 'web',
entry: './build/unbundled/browser.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build/public')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
debug: true,
useBuiltIns: true,
targets: { browsers: ['last 2 versions'] },
exclude: babelPresetEnvExclude
}]
],
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new ExtractTextPlugin('main.css'),
]
}
console.log('NODE_ENV', JSON.stringify(process.env.NODE_ENV || 'development'))
module.exports = [browser, server]
的package.json：
{
"name": "rtm-owl",
"version": "1.0.0",
"main": "index.js",
"author": "boring@example.com",
"license": "MIT",
"scripts": {
"relay": "relay-compiler --src ./build/unbundled --schema data/schema.graphqls",
"build": "tsc --pretty && npm run relay && webpack --progress",
"debug": "npm run build && node --inspect build/server.js",
"debug-brk": "npm run build && node --inspect-brk build/server.js",
"start": "node build/server.js",
"watch": "concurrently --kill-others 'tsc --pretty --watch' 'relay-compiler --src ./build/unbundled --schema data/schema.graphqls --watch' 'webpack --watch' 'nodemon build/server.js'"
},
"devDependencies": {
"@types/chart.js": "^2.6.1",
"@types/debug": "^0.0.30",
"@types/express": "^4.0.36",
"@types/fs-extra": "^4.0.0",
"@types/isomorphic-fetch": "^0.0.34",
"@types/lodash": "^4.14.71",
"@types/morgan": "^1.7.32",
"@types/react": "^16.0.0",
"@types/react-chartjs-2": "^2.0.2",
"@types/react-dom": "^15.5.1",
"@types/react-redux": "^4.4.47",
"@types/serialize-javascript": "^1.3.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-relay": "^1.1.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"concurrently": "^3.5.0",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"fs-extra": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"nodemon": "^1.11.0",
"postcss-css-variables": "^0.7.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-nested": "^2.1.0",
"relay-compiler": "^1.1.0",
"relay-runtime": "^1.1.0",
"serialize-javascript": "^1.3.0",
"style-loader": "^0.18.2",
"typescript": "^2.4.1",
"webpack": "^3.0.0"
},
"dependencies": {
"chart.js": "^2.6.0",
"debug": "^2.6.8",
"express": "^4.15.3",
"farce": "^0.2.1",
"found": "^0.3.1",
"found-relay": "^0.3.0-alpha.4",
"lodash": "^4.17.4",
"morgan": "^1.8.2",
"react": "^15.6.1",
"react-chartjs-2": "^2.5.5",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-relay": "^1.0.0",
"redux": "^3.7.2"
}
}
答案 0 :(得分：1)
我遇到了类似的行为，webpack --watch对macOS 10.14上的CSS文件中的更改没有反应。我使用了基本的style-loader和css-loader，并需要require('./style.css')之类的css文件。
已解决。在我的package.json中，只要修改了js或css文件，以下设置就会运行webpack。
...
scripts: {
"build": "webpack",
"watchbuild": "nodemon --watch ./ --ext js,css --ignore dist --exec \"npm run build\"",
...
},
devDependencies: {
"nodemon": "^2.0.4",
"webpack": "^4.39.3",
...
}
...
可以轻松地自定义设置，以观看更多文件类型并执行一系列命令。例如，nodemon --watch ./ --ext js,ejs,css,pcss --ignore dist --exec 'npm run lint && npm run build'还将监视ejs模板和pcss样式，并在构建之前运行linter。
注意，我必须忽略构建目录dist以防止无限构建循环。另请注意，\"而非'可以在macOS和Windows之间提供兼容性。