使用 webpack 打包 bootstrap 后 bootstrap 的 'data-*' 属性失效?

Vicey_Wang
  • 25

使用 webpack 的 Dll 插件把 bootstrap 打包成一个 dll,打包过程无报错,使用 webpack-dev-server 启动使用该 dll 的应用后,响应式的导航栏中的按钮点击后不会弹出下拉菜单。
webpack.vendor.config.js 部分:

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

const config = require('./config');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    const extractCSS = new ExtractTextPlugin('vendor.css');

    return [{
        stats: {
            modules: false
        },
        context: config.workspaceRoot,
        resolve: {
            extensions: ['.js']
        },
        entry: {
            vendor: [
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'isomorphic-fetch',
                'jquery',
                'vue',
                'vue-router'
            ],
        },
        module: {
            rules: [{
                    test: /\.css(\?|$)/,
                    use: extractCSS.extract({
                        use: isDevBuild ? 'css-loader' : 'css-loader?minimize'
                    })
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/,
                    use: 'url-loader?limit=100000'
                }
            ]
        },
        output: {
            path: config.outputPath,
            publicPath: config.publicPath,
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            extractCSS,
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
            }),
            new webpack.DllPlugin({
                path: path.join(config.outputPath, '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    }];
};

Html(Vue文件)部分:

<template>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Expand</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Vicey's Blog</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/resume">About me</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/login">Login</a>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script lang="ts" src="./BlogNavBar.ts"></script>

<style src='./BlogNavBar.css'></style>

观察打包后的 vendor.js,jquery 与 bootstrap 都被打包成功,但点击按钮仍无反应,直接引用 cdn 的 bootstrap 则可以正常使用,请问可能是什么原因呢?

回复
阅读 2k
1 个回答

jquery和bootstrap版本问题?

宣传栏