文章/答案/技术大牛

发布

社区首页 >问答首页 >如何告诉webpack额外的依赖？

问如何告诉webpack额外的依赖？
EN

Stack Overflow用户

提问于 2017-09-25 09:24:43

回答 1查看 138关注 0票数 0

比方说，您有一些变量想要在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和change变量时，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"
  }
}

javascript

css

webpack

dependencies

webpack-dev-server

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-25 09:24:43

我想出了以下解决方法：

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());
+            });
+        }},
+    ],
 };

我遇到的问题是：

postcss-custom-properties插件返回一个带有方法的对象，该对象可用于更新vars。但是postcss/cssnext没有提供访问该对象的易道。所以我猴子补丁postcss-cssnext/lib/features.js，截取对象并放入customPropertiesPlugin变量。
我不能简单地要求vars.js。内容被缓存。

如果你知道更简单的方法，如果你告诉我，我会很感激的。或者只是个主意。或者改进我的解决方案。我想，理想情况下，postcss插件必须允许@import javascript文件。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46401773

复制

相似问题

问如何告诉webpack额外的依赖？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何告诉webpack额外的依赖？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何告诉webpack额外的依赖？
EN