主页 / 问题 / 689873
Accepted
Nikolay
Asked:2020-07-08 23:53:13 +0000 UTC2020-07-08 23:53:13 +0000 UTC

如何读取 webpack 中的所有导入？

  • 772

这是我的 app.js：

import './scss/style.scss';
import './js/script-1.js';
import './js/script-2.js';
import './css/style-1.css';
import './css/style-2.css';

这是配置中的部分代码：

    {
      test: /\.js$/g,
      exclude: [/node_modules/],
      use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
      }]
    },{
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "sass-loader",
            options: {
                includePaths: [path.resolve(__dirname, "./node_modules/compass-mixins/lib")]
            }
        }]
    },
    {
        test: /\.css$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }]
    }

结果，我只连接了一个样式文件或一个脚本。我试图将正则表达式更改为/\.css/g，然后根本没有任何效果。你能做得更正确吗？这些是重要的自写库。

javascript

2 个回答

  1. Best Answer

    您的配置（您提供的配置）绝对正确。

    让我们处理您的脚本，即jquery评论中的措辞不起作用。可以看出，您根据脚本的性能确定了包中脚本的存在。典型的 webpack 入口点代码：

    import "./1.js";
import "./2.js";

    输出会给你类似的东西：

    (function(module, exports, __webpack_require__) {
   // 1.js

}),
(function(module, exports, __webpack_require__) {
   // 2.js
})

    您可以通过打开捆绑包自行验证这一点。显然，以JQuery某种方式在内部声明的变量1.js将仅在那里保持可见。也就是说，2.js它将不再可用，这就是您所面临的。

    为什么这样做超出了这个问题的范围，所以我将尝试回答“如果我想要jquery全局范围内的其他东西，我现在应该做什么”这个问题

    在公共图书馆的情况下，同一个，使用起来很jquery方便

    new webpack.ProvidePlugin({
      JQuery: 'jquery'// $: "jquery", refer to docs
})

    对于这样的用途，它必须作为一个包jquery被预先安装。npm

    对于自写项目 - 您可以将它们npm打包。一个简单设计的例子（我希望没有人会因为我的作者身份而感到困惑）：https ://github.com/vpotseluyko/url-get-parser

    或者利用expose-loader

    例子：

    入口点：

    require("expose-loader?varname!./main.js");

    主.js

    module.exports = 'my imp string for global scope';

    内联脚本中的某处：

    console.log(varname); // `my imp string...'(only after webpack script loaded)
    • 3

  2. 保存截屏视频。你只需要做几个切入点

    • -1

相关问题