Vue-cli 版本 3 BETA webpack 配置
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
不抱怨...
所以它似乎没问题,但我想知道是否有一些关于这个主题的论文、教程、例子......目前我只是通过阅读现有代码源来发现新功能
目前我正在努力转换这个:
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)
你的require命令是wrong/unecessary,与webpack或vue-cli
无关
示例代码:
config
.plugin('provide')
.use(require('webpack').ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
除非您不使用 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
配置进行一些更改,This(可在我在评论部分与您分享的文档中找到)可能是您想要熟悉的内容。
注意:您必须使用数组将参数传递给插件。虽然插件本身需要一个对象,但 use()
正在等待一个参数数组。这就是为什么您应该改用数组的原因。
我应该在...之前定义新的插件用法
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 Plugin。
这是在 vue.config.js
中成功完成的,使用了以下使用两个最佳答案的语法:
module.exports = {
chainWebpack: config => {
config.plugin("provide").use(require("webpack").ProvidePlugin, [
{
$: "jquery",
jQuery: "jquery"
}
]);
}
};
这避免了安装 webpack
并将对象数组而不是对象传递给 config.plugin
函数。
我正在尝试学习和测试即将推出的 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
不抱怨...
所以它似乎没问题,但我想知道是否有一些关于这个主题的论文、教程、例子......目前我只是通过阅读现有代码源来发现新功能
目前我正在努力转换这个:
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)
你的require命令是wrong/unecessary,与webpack或vue-cli
无关示例代码:
config
.plugin('provide')
.use(require('webpack').ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
除非您不使用 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
配置进行一些更改,This(可在我在评论部分与您分享的文档中找到)可能是您想要熟悉的内容。
注意:您必须使用数组将参数传递给插件。虽然插件本身需要一个对象,但 use()
正在等待一个参数数组。这就是为什么您应该改用数组的原因。
我应该在...之前定义新的插件用法
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 Plugin。
这是在 vue.config.js
中成功完成的,使用了以下使用两个最佳答案的语法:
module.exports = {
chainWebpack: config => {
config.plugin("provide").use(require("webpack").ProvidePlugin, [
{
$: "jquery",
jQuery: "jquery"
}
]);
}
};
这避免了安装 webpack
并将对象数组而不是对象传递给 config.plugin
函数。