使用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": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a475c5b5275504d54584559501b565a58" rel="noreferrer noopener nofollow">[email protected]</a>",
"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"
}
}
最佳答案
我遇到了类似的行为，webpack --watch 对 macOS 10.14 上的 css 文件的更改没有反应。我使用了基本的 style-loader 和 css-loader 并需要我的 css 文件，例如 require('./style.css')。
已解决，方法是切换到 nodemon 。在我的 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 之间的兼容性。
关于css - Webpack --watch 不会触发特定目录中的 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45515724/