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来说，非uglified版本太长了，所以这里是Hastebin：https://hastebin.com/vululimupi.js

Answer 1

问题在于您尚未将此依赖项定义为模块。在支持的模块format specs之后重写它应该会有所帮助。

Answer 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));

这很好用。

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 用户。

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

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

我最终做了：

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

Webpack捆绑的JS没有被执行

4 个答案: