Uncaught ReferenceError: <something>не определено

Question

В моем проекте github я получаю сообщение об ошибке Uncaught ReferenceError: breakpoints is not defined в консоли Chrome. Это должно быть решено из breakpoints.min.js, но веб-пакет каким-то образом ломает / искажает его.

Я думаю, что это как-то связано с веб-пакетом и с тем, как я импортирую статические js-файлы из темы , которую я скачал.

breakpoints разрешает, если я вставлю оригинальное содержимое breakpoints.min.js в консоль Chrome.

Вот мой 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

EDIT:

breakpoints вызывается в main.js в строке 17. На выходе консоли веб-пакета breakpoints.min.js загружается до main.js, как можно видеть выше.

Answer 1

Как вы используете breakpoints?
Исходя из сообщенной ошибки, похоже, что некоторый файл сценария пытается использовать breakpoints до того, как файл, который его определяет, был загружен (и запустить достаточно, чтобы определить breakpoints).

Посмотрите на консоль Chrome с правой стороны, чтобы увидеть, какая строка вызывает эту ошибку.Это код, который выполняется до этого определения.Убедитесь, что код не запускается до тех пор, пока файл, определяющий breakpoints, не завершит загрузку.

Answer 2

Попробуйте эту конфигурацию:

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"
    })
  ]
});