未捕獲的ReferenceError： <something> 沒有定義

Question

在我的github項目中 ，我收到錯誤Uncaught ReferenceError: breakpoints is not defined在chrome控制台中Uncaught ReferenceError: breakpoints is not defined 。 這應該從breakpoints.min.js解決，但webpack在某種程度上打破/破壞它。

我認為它與webpack有關，以及我如何從我下載的主題中導入靜態js文件。

如果我將原始breakpoints.min.js內容粘貼到chrome控制台中，則breakpoints解析。

這是我的webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
});

我沒有看到webpack調試輸出中的任何錯誤：

Webpack is watching the files…

Hash: e70b0e57a305a5ee940a
Version: webpack 4.4.0
Time: 2890ms
Built at: 5/7/2019 9:08:20 PM
                Asset       Size       Chunks             Chunk Names
       ../css/app.css    113 KiB  ./js/app.js  [emitted]  ./js/app.js
               app.js    351 KiB  ./js/app.js  [emitted]  ./js/app.js
       ../favicon.ico   1.23 KiB               [emitted]
../images/overlay.png   2.74 KiB               [emitted]
  ../images/pic02.jpg   20.2 KiB               [emitted]
../images/phoenix.png   13.6 KiB               [emitted]
  ../images/pic01.jpg   59.5 KiB               [emitted]
     ../images/bg.jpg    396 KiB               [emitted]
  ../images/pic03.jpg   20.2 KiB               [emitted]
  ../images/pic04.jpg   20.3 KiB               [emitted]
  ../images/pic08.jpg   13.1 KiB               [emitted]
  ../images/pic06.jpg   20.6 KiB               [emitted]
  ../images/pic05.jpg   20.7 KiB               [emitted]
  ../images/pic07.jpg   20.7 KiB               [emitted]
  ../images/pic09.jpg   12.7 KiB               [emitted]
        ../robots.txt  202 bytes               [emitted]
   [0] multi ./js/app.js ./vendor/js/breakpoints.min.js ./vendor/js/browser.min.js ./vendor/js/jquery.scrollex.min.js ./vendor/js/jquery.scrolly.min.js ./vendor/js/main.js ./vendor/js/util.js 100 bytes {./js/app.js} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built]
[./css/app.css] 39 bytes {./js/app.js} [built]
[./js/app.js] 493 bytes {./js/app.js} [built]
[./vendor/js/breakpoints.min.js] 4.25 KiB {./js/app.js} [built]
[./vendor/js/browser.min.js] 2.76 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrollex.min.js] 3.3 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrolly.min.js] 1.25 KiB {./js/app.js} [built]
[./vendor/js/main.js] 4.92 KiB {./js/app.js} [built]
[./vendor/js/util.js] 11.3 KiB {./js/app.js} [built]
    + 6 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css:
    [./node_modules/css-loader/dist/cjs.js!./css/app.css] 455 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/font-awesome.min.css] 32.4 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/main.css] 99.2 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/noscript.css] 1.12 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

編輯：

在第17行的main.js中調用breakpoints 。從webpack控制台輸出， breakpoints.min.js似乎在main.js之前main.js ，如上所示。

Answer 1

試試這個配置：

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },

  entry: {
    'vendor': glob.sync('./vendor/**/*.js'),
    './js/app.js':  ['./js/app.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
});

Answer 2

你是如何使用breakpoints ？
根據報告的錯誤，聽起來有一些腳本文件試圖在定義它的文件被加載（並運行足以定義breakpoints ）之前使用breakpoints 。

查看右側的Chrome控制台，查看引發該錯誤的行。 這是在該定義之前運行的代碼。 確保在定義breakpoints的文件加載完畢之后代碼才會運行。