logo标签列表

使用Webpack和Bootstrap一起出现错误

csstwitter-bootstrapwebpackwebpack-2webpack-style-loader
4
我已经苦思冥想了几天，如果这个问题很简单的话请见谅，因为我刚接触Webpack。我希望将Bootstrap引入我的项目中，而不是使用CDN或其他方法。但是我遇到了两个问题：
  1. Bootstrap没有在页面上呈现
  2. 我无法加载.woff和.woff2 glyhicon文件
下面是我的代码，可以看出我目前的进展。谢谢您提前的帮助！
文件树 (左侧的文件被省略以保持清晰)：
-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;

编辑:

@InfiniteStack要求提供错误日志，以下是日志:

Chrome调试错误:

Uncaught Error: 模块解析失败: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.woff2 非预期字符 '

Webpack错误:

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 模块解析失败: C:\Users\{user}\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

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 模块解析失败: C:\Users\{user}\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

1个回答
3

多亏了@InfiniteStack和webpack/webpack的Gitter团队，我现在有了一个完整的答案。

在webpack.config.js中，在进一步修改之前，需要使用 仅 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;

简而言之： 将jQuery定义为插件 在添加额外内容之前，使用url-loader定义所有非js资源
如果有其他人对此原理有更多的回答，欢迎私信联系我。
再次感谢！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接