使用 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 则可以正常使用,请问可能是什么原因呢?
相似问题