html-webpack-plugin нарушает функциональность выпадающего загрузчика - PullRequest
Новая
       34

html-webpack-plugin нарушает функциональность выпадающего загрузчика

0 голосов
/ 15 апреля 2019

Недавно я пытался устранить проблему FOUC, которая возникала в приложении, я решил попробовать html-webpack-plugin с mini-css-extract-plugin, чтобы вставить стили перед загрузкой на страницу javascript и т. Д.В настоящее время приложение использует загрузчик для большей части своего стиля и функциональности.Благодаря использованию подключаемых модулей проблема с FOUC устранена, но побочным эффектом, по-видимому, является то, что выпадающий список начальной загрузки теперь полностью не реагирует на действия, связанные с щелчками.Bootstrap 3.3.7, js импортируется в точке входа приложения, а css импортируется через "main.css".

Вот конфигурация Webpack (с опущенными несвязанными битами): 

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const WebpackConfig = {
  context: path.join(__dirname, '_src'),
  entry: {
    main: './entry.js',
  },
  output: {
    path: path.resolve(`${__dirname}/_build`),
    publicPath: '/',
    filename: './js/app.js',
  },
  resolve: {
    extensions: ['.ts', '.js', '.json'],
  },
  module: {
    rules: [{
      test: /\.(ts|js)$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
      }],
    }, {
      test: /\.html?/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: false,
          attrs: ['img:src', 'link:href'],
        },
     }],
   }, {
      test: /\.(sa|sc|c)ss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            hmr: process.env.NODE_ENV === 'development',
          },
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
          },
        }, {
          loader: 'postcss-loader',
          options: {
            plugins() {
              return [
                autoprefixer,
              ];
            },
          },
        },
        'sass-loader',
      ],
    }],
  },
  plugins: [
    // extracts css from js
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    // // insert css into html pre js
    new HtmlWebpackPlugin({
      inject: 'head',
      template: './index.html',
    }),
    // add jquery to global window object
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

Вот entry.js: 

// import styles
import './styles/main.scss';

// global app dependencies
import 'jquery-ui/ui/widgets/sortable';
import 'bootstrap';

// client scripts
import './js/app';

Проблема, похоже, связана с html-webpack-plugin, как будто я комментирую это, выпадающий снова становится отзывчивым.У меня проблемы с диагностикой точной проблемы, хотя я полагаю, что это может быть очевидно для кого-то более опытного с этими инструментами.Заранее спасибо за любую помощь или руководство!

...