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("-", ".")