Question

最近，我试图消除应用程序中发生的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上，好像我在下拉列表中再次变得敏感一样。尽管我认为对于那些使用这些工具的经验丰富的人来说可能很明显，但我无法诊断出确切的问题。在此先感谢您的帮助或指导！

html-webpack-plugin破坏了引导程序下拉功能

0 个答案: