javascript - 如何告诉 webpack 额外的依赖？

Question

比如说，你有一些变量想要在 css 和 js 代码之间共享:

vars.js:

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

样式.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 反射(reflect)更改而无需重新启动 webpack-dev-server。附言我并没有死心塌地地使用 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 method 的对象，可用于更新变量。但是 postcss/cssnext 没有提供 easy way访问该对象。所以我猴子修补 postcss-cssnext/lib/features.js，拦截对象并放入 customPropertiesPlugin 变量。

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

如果您知道任何更简单的方法，请告诉我，我将不胜感激。或者也许只是一个想法。或者改进我的解决方案的方法。理想情况下，我想必须有允许 @import javascript 文件的 postcss 插件。