如何告诉WebPack有关额外的依赖性

Question

说，您有一些要在CSS和JS代码之间共享的变量：

vars.js：

module.exports = {
    'body-margin': '100px',
};

style.css：

body {
    margin: var(--body-margin);
}

entry.js：

var vars = require('./vars.js');
require('./style.css');
document.body.appendChild(
    document.createTextNode(vars['body-margin']));

我使用postcss-cssnext/postcss-custom-properties插件来做到这一点：

webpack.config.js：

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {                         
    entry: './entry.js',                   
    output: {                                                                              
        filename: 'bundle.js',             
    },                                                                                     
    module: {                                                                              
        rules: [{                          
            test: /.css$/,                
            use: [                         
                'style-loader',            
                'css-loader',
                {loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('postcss-cssnext')({
                            features: {
                                customProperties: {
                                    variables: require('./vars.js'),
                                },
                            },
                        }),
                    ],
                }},
            ],
        }],
    },
    plugins: [new HtmlWebpackPlugin()],
};

但是，当我运行webpack-dev-server并更改vars.js中的变量时，JavaScript代码会注意更改，但CSS代码不会。有没有办法来解决这个问题？使CSS反映更改，而无需重新启动webpack-dev-server。P.S.我并没有使用postcss/cssnext/postcss-custom-properties共享变量（如果有的话）。

package.json：

{
  "dependencies": {
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "postcss-cssnext": "^3.0.2",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

Answer 1

我想出了以下方法来修复它：

diff --git a/webpack.config.js b/webpack.config.js
index 0046862..73c75a1 100644                                               
--- a/webpack.config.js                              
+++ b/webpack.config.js                 
@@ -1,5 +1,20 @@                                    
+var path = require('path');                                         
 var HtmlWebpackPlugin = require('html-webpack-plugin');           
+var varsFile = './vars.js';            
+                                                                                  
+var postcssCssnextFeatures = require('postcss-cssnext/lib/features').default;
+var customPropertiesPlugin;
+postcssCssnextFeatures.customProperties = (options) => {       
+    customPropertiesPlugin = require('postcss-custom-properties')(options);
+    return customPropertiesPlugin;                  
+};                                     
+                                                           
+function getVars() {                                                
+    delete require.cache[require.resolve(varsFile)];              
+    return require(varsFile);
+}
+
 module.exports = {
     entry: './entry.js',
     output: {
@@ -17,7 +32,7 @@ module.exports = {
                         require('postcss-cssnext')({
                             features: {
                                 customProperties: {
-                                    variables: require('./vars.js'),
+                                    variables: getVars(),
                                 },
                             },
                         }),
@@ -26,5 +41,22 @@ module.exports = {
             ],
         }],
     },
-    plugins: [new HtmlWebpackPlugin()],
+    plugins: [
+        new HtmlWebpackPlugin(),
+        {apply: function(compiler) {
+            compiler.plugin('compilation', function(compilation) {
+                compilation.plugin('succeed-module', function(module) {
+                    if (module.resource
+                    && module.resource.indexOf(path.resolve('node_modules')) == -1
+                    && path.extname(module.resource) == '.css'
+                    && module.fileDependencies.indexOf(varsFile) == -1   // extract-text-webpack-plugin, for instance, makes webpack build modules twice
+                    ) {
+                        module.fileDependencies.push(varsFile);
+                    }
+                });
+            });
+            compiler.plugin('invalid', function(filename) {
+                customPropertiesPlugin.setVariables(getVars());
+            });
+        }},
+    ],
 };

我遇到的问题：

1. postcss-custom-properties插件用setVariables方法返回一个对象，可用于更新vars。但是postcss/cssnext不能提供访问该对象的简便方法。因此，我猴子补丁postcss-cssnext/lib/features.js，拦截对象并放入customPropertiesPlugin变量。

2. 我不能简单地需要vars.js。内容被缓存。

如果您知道任何简单的方法，如果您告诉我，我会很感激。也许只是一个主意。或一种改善我的解决方案的方法。理想情况下，我猜必须有postcss插件允许@import JavaScript文件。