首页 文章

一起使用Webpack和Bootstrap的错误

提问于
浏览 次
3

几天来，我一直在反对这个问题，所以如果这是一个简单的解决方案，我会道歉 . 我是Webpack的新手 .

我想将Bootstrap导入到我的项目中，而不是使用CDN或任何其他方法 . 但我发生了两个问题：

  • Bootstrap未在页面上呈现

  • 我一直在尝试加载.woff和.woff2 glyphicons

我将在下面提供我的代码，这将告诉你我在哪里 . 我在这里先向您的帮助表示感谢！

文件树（为清晰起见，左侧文件）：

-node_modules
-src
--index.html
--app
---vendor.jsx
--build
---app.js
---vendor.js
-webpack.config.js

的index.html

<body>
    <!-- Insert other Body code here -->

    <!-- Webpack Bundle -->
    <script src="build/vendor.js"></script>
    <script src="build/app.js"></script>
</body>

vendor.jsx

// JS dependencies
const $ = require('jquery');
const bootstrap = require('bootstrap');
import React from 'react';
import ReactDOM from 'react-dom';

// CSS files
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

webpack.config.js

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

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

var config = {
    entry: {
        app: APP_DIR + '/app.jsx',
        vendor: APP_DIR + '/vendor.jsx'
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    }
};

module.exports = config;

EDIT:

@InfiniteStack询问错误日志，因此它们包括在下面：

Chrome调试错误：

未捕获错误：模块解析失败：C：\ Users \ \ Code \ ref-data-mapper \ node_modules \ bootstrap \ dist \ fonts \ glyphicons-halflings-regular.woff2 Unexpected character'

Webpack错误：

错误./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff模块解析失败：C：\ Users \ \ Code \ ref-data-mapper \ node_modules \ bootstrap \ dist \ fonts \ glyphicons -halflings-regula r.woff意外的字符''（1：4）您可能需要一个合适的加载器来处理这种文件类型 . （此二进制文件省略了源代码）@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6：4707-4760 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx错误在./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2模块解析失败：C：\ Users \ \ Code \ ref-data-mapper \ node_modules \ bootstrap \ dist \ fonts \ glyphicons-halflings-regula r.woff2意外字符''（1：4）您可能需要一个合适的加载程序来处理此文件类型 . （此二进制文件省略了源代码）@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6：4622-4676 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx

css twitter-bootstrap webpack webpack-2 webpack-style-loader

1 回答

  • 2

    感谢@InfiniteStack和webpack / webpack的Gitter工作人员，我现在有了完整的答案 .

    在webpack.config.js中，在进一步修改它们之前，必须使用 just url-loader？limit100000引用url-loader .

    同样，jQuery需要被定义为底部附近的webpack中的插件 . 所有更改都需要在webpack.config.js中进行 . 我完成的文件如下：

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

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

var config = {
    entry: {
        app: APP_DIR + '/app.jsx',
        vendor: APP_DIR + '/vendor.jsx'
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.png$/,
                use: 'url-loader?limit=100000'
            },
            {
                test: /\.jpg$/,
                use: 'file-loader'
            },
            {
                test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                use: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

module.exports = config;

    所以TL; DR：将jQuery定义为插件在添加额外内容之前使用url-loader定义所有非js资产

    如果其他人有更多的答案，为什么这有效，如果你想PM /给我留言，我愿意接受 .

    再次感谢你！

    回复于

相关问题