Webpack 捆绑的 JS 没有被执行

Question

这是一个非常奇怪的问题，因为实际上，一些捆绑的代码正在执行。 我为我的 CSS 使用样式加载器，当然它会被放入bundle.js并加载并正常工作。 但是，我还有一个文件，其中包含一些用于设置 jQuery localScroll 插件的代码，但该代码不起作用。

为了测试它，我在同一个文件中包含了对console.log()的调用，只是告诉它写数字 4。如果我打开bundle.js ，我可以看到console.log()调用以及调用$.localScroll() ，它们只是没有运行。 从控制台手动调用$.localScroll()可以按预期工作。

这是有问题的JS文件：

console.log(4);
$(() => {
  $.localScroll({duration: 800});
});

这是我的 Webpack 配置：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './webpack-entry.js',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.optimize.UglifyJsPlugin()
  ],
  output: {
    filename: './javascripts/bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192,
            fallback: 'file-loader',
            name: './images/[hash].[ext]'
          }
        }
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name(file) {
                if(new RegExp(/partials/).test(file)) {
                  return './views/partials/[name].[ext]'
                }
                return './views/[name].[ext]'
              }
            }
          },
          'pug-asset-loader?root=./src'
        ],
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env'],
            }
          },
        ]
      }
    ],
  }
};

最后，这里是bundle.js （我的自定义代码似乎在最底层，在某种函数数组中）。 非丑化版本对 SO 来说太长了，所以它在 Hastebin 上： https ://hastebin.com/vululimupi.js

Answer 1

问题是您尚未将此依赖项定义为模块。 按照支持的模块格式规范重写它应该会有所帮助。

Answer 2

经过一些测试，似乎根本问题就像@uKolka 所说的那样——我的文件没有被要求作为模块。 虽然我还没有完全确定为什么他们的代码仍然出现在我的包文件，但不运行，我已经找到一种方法来获得仍的递归好处require.context() 似乎require.context()返回一个函数，该函数本身能够解析它在您指向的任何文件夹中记录的文件。 它还有一个成员函数keys() ，它非常方便地返回每个相关文件名，并且很容易与forEach()一起forEach() 。

鉴于所有这些，这就是我的webpack-entry.js现在的样子：

import './src/stylesheets/scss/master.scss';
require.context('./src/views', true, /\.pug$/);
const js = require.context('./src/javascripts/', false, /\.js$/);

js.keys().forEach(key => js(key));

这工作得很好。

Answer 3

就我而言，这是由于 Babel 和 React。 如果你使用 React，那么尝试直接调用./src/index.js并在你的 .babelrc 中使用"@babel/preset-env", "@babel/preset-react" 。 你可以看看我的要点。 在你的 webpack.config.js 中：

{
    test: /\.js?$/,
    use: ["babel-loader"],
    exclude: /node_modules/
  },

看看要点： https : //gist.github.com/Nagibaba/14e898d99a4be89b00a60d28abc19bc0

Answer 4

仅适用于 ruby​​ 的 rails/webpacker 用户。

这个问题标题和内容让我在这个问题之前找到了它，这可能是这里一些用户的正确答案。 为了避免链接腐烂，我将在下面简要解释一下：

确保您的@rails/webpacker npm 库和webpacker gem 都具有相同的确切版本。

我最终做了：

IO.foreach("package.json").find { |line| line[%r("@rails/webpacker": "(.*?)")]}
gem "webpacker", Regexp.last_match(1).tr("-", ".")