首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用 webpack 打包 bootstrap 后属性失效?

使用 webpack 打包 bootstrap 后属性失效?

提问于 2017-11-27 10:57:22
回答 1关注 0查看 1K

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

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

Html(Vue文件)部分:

代码语言:txt
复制
<template>
代码语言:txt
复制
    <nav class="navbar navbar-inverse navbar-fixed-top">
代码语言:txt
复制
        <div class="navbar-header">
代码语言:txt
复制
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
代码语言:txt
复制
                <span class="sr-only">Expand</span>
代码语言:txt
复制
                <span class="icon-bar"></span>
代码语言:txt
复制
                <span class="icon-bar"></span>
代码语言:txt
复制
                <span class="icon-bar"></span>
代码语言:txt
复制
            </button>
代码语言:txt
复制
            <a class="navbar-brand" href="/">Vicey's Blog</a>
代码语言:txt
复制
        </div>
代码语言:txt
复制
        <div class="navbar-collapse collapse" id="navbar">
代码语言:txt
复制
            <ul class="nav navbar-nav">
代码语言:txt
复制
                <li>
代码语言:txt
复制
                    <a href="/">Home</a>
代码语言:txt
复制
                </li>
代码语言:txt
复制
                <li>
代码语言:txt
复制
                    <a href="/resume">About me</a>
代码语言:txt
复制
                </li>
代码语言:txt
复制
            </ul>
代码语言:txt
复制
            <ul class="nav navbar-nav navbar-right">
代码语言:txt
复制
                <li>
代码语言:txt
复制
                    <a href="/login">Login</a>
代码语言:txt
复制
                </li>
代码语言:txt
复制
            </ul>
代码语言:txt
复制
        </div>
代码语言:txt
复制
    </nav>
代码语言:txt
复制
</template>
代码语言:txt
复制
代码语言:txt
复制
<script lang="ts" src="./BlogNavBar.ts"></script>
代码语言:txt
复制
代码语言:txt
复制
<style src='./BlogNavBar.css'></style>

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

相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档