Webpack 捆绑的 JS 未执行答案

【问题标题】：Webpack bundled JS not being executedWebpack 捆绑的 JS 未执行
【发布时间】：2018-01-04 18:11:09
【问题描述】：

这是一个非常奇怪的问题，因为实际上，一些捆绑的代码正在被执行。我为我的 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

【问题讨论】：

您的问题可能是您将文件与 console.log 一起用作模块。它不遵循我见过的任何模块规范。您可能需要使用任何formats supported 来定义它。您也可能需要在入口点导出它并从那里调用它。
@uKolka 我修改了这个建议，发现无论出于何种原因，将入口文件中的require.context() 更改为特定文件的直接require() 可以使其工作。包含我的 JS 文件的捆绑代码部分在我看来并没有什么不同，所以我不确定为什么会这样，但它确实有效。谢谢！
情况就是这样，就像任何其他依赖 JS 模块化的打包工具一样。

标签： javascript jquery webpack

【解决方案1】：

问题是您没有将此依赖项定义为模块。按照支持的模块 format specs 重写它应该会有所帮助。

【讨论】：

【解决方案2】：

经过一些测试，似乎根本问题就像@uKolka 所说的那样 - 我的文件没有被要求作为模块。虽然我仍然不完全确定为什么他们的代码仍然出现在我的捆绑文件中但没有运行，但我已经找到了一种方法来仍然获得require.context() 的递归优势。似乎require.context() 返回了一个函数，该函数本身能够解析它在您指向的任何文件夹中记录的文件。它还有一个成员函数keys()，它可以很方便地返回每个依赖的文件名，并且很容易与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));

这很好用。

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

这个问题的标题和内容让我在this issue 之前找到了它，这可能是这里某些用户的正确答案。为避免链接失效，我将在下面简要说明：

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

我最终做了：

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

【讨论】：