Question

我正在尝试学习和测试即将推出的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)

Answer 1

这应该有效，除非你不使用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（在我在评论部分与您分享的文档中找到）可能是您想要熟悉的内容。

注意：您必须使用数组传递参数到插件。虽然插件本身需要一个Object，但use()正在等待一个参数数组。这就是你应该使用数组的原因。

Answer 2

您的require命令错误/不必要，与webpack或vue-cli无关

示例代码：

config
  .plugin('provide')
  .use(require('webpack').ProvidePlugin, [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }])

Answer 3

我应该在...之前定义新的插件用法。

const path = require('path')
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

Answer 4

在使用最新的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函数而不是对象。

Vue-cli版本3 BETA webpack配置

4 个答案: