如何告訴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。附：如果有的話，我還沒有設置使用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。內容被緩存。

如果你知道任何簡單的方法，如果你告訴我，我會很感激。或者只是一個想法。或者一種改進我的解決方案的方法。理想情況下，我想，必須有postcss插件，允許@import JavaScript文件。