Vue-cli 3 BETA Webpack配置

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（beta）。 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)

- user762579

---

这部分的vue-cli文档（https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md）是我目前所知道的关于webpack配置的唯一部分。不管怎样，你实际上遇到了什么问题？ - oniondomes

感谢您的反馈，我已经更新了我的问题并附上了当前的问题。 - user762579

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配置进行一些更改的话。

注意：你需要使用一个数组来传递参数给插件。虽然插件本身期望一个对象，但是use()正在等待一个参数数组。这就是为什么你应该使用数组而不是对象。

- oniondomes

Answer 2

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

示例代码：

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

- Linus Borg

---

谢谢...没有赶上require()， 但是运行i时，我遇到了一个错误 INFO 开始开发服务器... ERROR TypeError: Plugin不是构造函数 TypeError: Plugin不是构造函数 - user762579

哦，是ProvidePlugin，不是providePlugin。我会更正我的回答。 - Linus Borg

使用最新的vue-cli版本（3.2.1），并尝试使用jquery，我发现该插件更希望像oniondomes的答案中那样使用数组。 - Anas Tiour

是的，我在这里错了，已经相应修正了答案。 - Linus Borg

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'
      })
    ]
  }
}

- user762579

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函数而不是一个对象。

- Anas Tiour