Question

我是新手做出反应，我有一个项目，其中我使用bootstrap为css但现在我想从webpack加载该css和js文件..我不知道如何从webpack加载bootstrap文件以及如何写webpack的配置文件，但我也尝试通过搜索来加载.. 这是我的配置文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: './index.js',
output: { filename: 'bundle.js' },
module: {
loaders: [
  {
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react']
    }
  },
  {
    test: /\.css$/,
    loader: "style-loader!css-loader"
  },
 ]
},
};

请告诉我任何解决方案我该怎么做？非常感谢。

我在index.js文件中导入什么？我只有我的路线..

import ReactDOM from "react-dom";
ReactDOM.render(
   routes ,
  document.getElementById("crm")
);

Answer 1

这是使用Webpack 2和HtmlWebpackPlugin / ExtractTextPlugin的一个选项。

将import './style.css';（或其中任何位置）添加到您的反应index.js（其中样式也可以放置bootstrap.min.css和/或其他文件。

js文件import './jquery.js';和import './bootstrap.js';相同。

样式表Link / href将在index.html中输入，输出css文件将放在dist（output.path）目录中。 js文件将被注入bundle.js（检查CommonsChunkPlugin（link），以便在单独的.js文件中输出这些文件和其他文件。

output.publicPatch非常重要，它不仅可以直接请求index.html，还可以通过路由。这样可以确保指向css的链接添加为/style.css，而不仅仅是index.html中的style.css。

webpack.config：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');

const config = {
    entry: {
        bundle: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/', <- used by HtmlWebpackPlugin
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/ 
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new ExtractTextPlugin("styles.css")
    ]    
}

module.exports = config;

希望这会有所帮助。让我知道。

如何在我的项目中从reactpack中的webpack添加Bootstrap css和js文件以及我在webpack配置文件中添加了什么？

1 个答案: