Question

我需要帮助设置webpack 4 for react js with bootstrap4，font awesome and sass。我按照下面的教程来启动我的项目，它工作得很好，但我想使用bootstrap4和字体很棒

https://www.valentinog.com/blog/webpack-4-tutorial/

尝试过这个，但这是针对webpack 3的，而且一些依赖项/插件与v4不兼容

https://medium.com/@estherfalayi/setting-up-webpack-for-bootstrap-4-and-font-awesome-eb276e04aaeb

我已经根据我的知识配置了webpack，遵循多个指南和教程

webpack.config.js

const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const precss = require('precss');
const path = require('path');

const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src/js');

var config = {
  entry: [
    APP_DIR + '/index.js',
    'tether',
    'font-awesome/scss/font-awesome.scss'
  ],
  output: {
    path: BUILD_DIR,
    filename: "js/bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]

  },
  {
    test: /font-awesome\.config\.js/,
    use: [
      { loader: 'style-loader' },
      { loader: 'font-awesome-loader' }
    ]
    // Bootstrap 4
    {
      test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery'
    }
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      tether: 'tether',
      Tether: 'tether',
      'window.Tether': 'tether',
      Popper: ['popper.js', 'default'],
      'window.Tether': 'tether',
      Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
      Button: 'exports-loader?Button!bootstrap/js/dist/button',
      Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
      Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
      Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
      Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
      Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
      Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
      Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: 'exports-loader?Util!bootstrap/js/dist/util'
    }),
  ]
};

module.exports = config;

Answer 1

某些webpack插件尚未支持webacpk4。 html-webpack-plugin需要使用测试版。

这是我使用webpack4的解决方案。 https://github.com/Rukeith/blog-website/blob/develop/webpack.common.js

如何使用bootstrap4，font-awesome和saas设置webpack 4 for react js？

1 个答案: