使用 webpack 打包 bootstrap 后 bootstrap 的 'data-*' 属性失效?
使用 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 则可以正常使用,请问可能是什么原因呢?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
jquery和bootstrap版本问题?