Tag:bootstrapwebpackjavascript
Article From:https://segmentfault.com/q/1010000012142212
Question:

Using the Dll plug-in of webpack to pack bootstrap into a DLL, the packaging process has no error, and after using webpack-dev-server to start the application of the DLL, the button in the response navigation bar is clicked.The drop-down menu is not popped.
webpack.vendor.config.js Part:

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(VueDocument) part:

<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>

After watching the package vendor.js, jQuery and bootstrap are all packaged successfully, but the click button is still unresponsive, and the direct reference to the bootstrap of CDN can be used normally. What is the reason for it?

Answer 0:

jqueryAnd bootstrap version problem?

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *