2

使用webpack --watch，在 [src/components/Main/] 内时不会拾取对 .pcss (PostCSS) 文件的更改。对 .js 文件的更改以及其他目录中的 .pcss 文件都会被很好地拾取。因为我的网络应用程序是同构的，ExtractTextPlugin用于将所有 CSS 压缩在一起并将其推送到单个文件中。

GitHub 上的完整代码。

这是在 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]

包.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"
  }

}
4

1 回答 1

1

我遇到了类似的行为，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 之间的兼容性。

于 2020-05-15T08:34:08.777 回答