[英]Vue-cli version 3 BETA webpack configuration
我正在尝试学习和测试即将推出的vuejs / vue-cli版本(beta 3.0),这将是向最简单的webpack配置迈出的一大步。 与此同时,很少有例子....
作为测试,我试图从vue-cli v2开始
webpack.dev.conf.js
plugins: [
...
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
到新的vue-cli版本3(测试版)
vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config
.plugin('copy')
.use(require('copy-webpack-plugin')), [{
from: path.resolve(__dirname, '../static'),
to: 'static', ignore: ['.*']
}]
}
}
赛跑
npm run serve
不抱怨......
所以它似乎没问题,但我想知道是否有一些关于这个主题已经存在的论文,tuts,例子...从现在开始我只通过阅读现有代码源来发现新功能
目前我正在努力转换这个:
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
我试过了 。
config
.plugin('provide')
.use(require('webpack.ProvidePlugin')), [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}]
但是我收到一个错误:
INFO Starting development server...
ERROR Error: Cannot find module 'webpack.ProvidePlugin'
Error: Cannot find module 'webpack.ProvidePlugin'
at Function.Module._resolveFilename (module.js:536:15)
这应该工作,除非你不使用webpack v4(v4由于某种原因抛出错误):
const webpack = require('webpack');
module.exports = {
chainWebpack: config => {
config
.plugin('provide')
.use(webpack.ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}]);
},
};
这 (我与你在注释部分共享文档中找到),可能是要熟悉,如果你想做出一些改变的东西vue-cli
配置。
注意:您必须使用数组传递参数到插件。 虽然插件本身需要一个Object,但use()
正在等待一个参数数组。 这就是你应该使用数组的原因。
你的require命令是错误的/不必要的,与webpack或vue-cli无关
示例代码:
config
.plugin('provide')
.use(require('webpack').ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
我应该在...之前定义新的插件用法
const path = require('path')
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
}
在使用最新的Vue CLI版本ATM(3.2.1)生成的项目中,我发现配置jQuery需要在项目中添加Webpack插件。
这在vue.config.js
成功完成,其语法使用两个最佳答案:
module.exports = {
chainWebpack: config => {
config.plugin("provide").use(require("webpack").ProvidePlugin, [
{
$: "jquery",
jQuery: "jquery"
}
]);
}
};
这样可以避免安装webpack
并将对象数组传递给config.plugin
函数而不是对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.