[英]How to include Jquery/Bootstrap files into the stack Webpack/angular2/typescript
[英]How include bootstrap and jquery to vue webpack-simple template?
我需要在vue应用上使用bootstrap 3。 我做以下事情:
vue init webpack-simple
npm install jquery bootstrap
之后,我添加到webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
}
并添加到src / main.js
window.$ = window.jQuery = require('jquery')
import 'bootstrap'
并在浏览器中出现错误:
未捕获的ReferenceError:未定义jQuery
我该如何解决这个问题?
更新:
我想说@Sandwell,但结果没有bootstrap.css。 我将行添加到src / main.js
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
并得到webpack编译错误:
./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf模块解析失败:意外字符''(1:0)您可能需要适当的加载程序来处理此文件类型。 (此二进制文件的源代码被省略)@ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @多(webpack)-dev-server / client? http:// localhost:8080 webpack / hot / dev-server ./src/main.js
我在webpack.config.js module.rules中有加载程序:
{
test: /\.(png|jpg|gif|svg|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
对于webpack 2
我为我的库做了一个供应商捆绑包。 它应该以这种方式工作。
module.exports = {
entry: {
app: 'path/to/initapp.js',
vendor: ['jQuery', 'Bootstrap']
}
output: {
path: rootPath + 'public/',
filename: 'js/[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
}
那么jQuery应该在vendor.js捆绑包中。别忘了将其导入initapp.js中
import 'bootstrap';
import jQuery from 'jQuery'
window.jQuery = jQuery
您应该检查此文档以获取更多详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.