Vue-cli 3.0 Beta版本Webpack配置迁移问题咨询

嘿，我最近也在折腾vue-cli 3.0 Beta的配置迁移，刚好碰到和你一样的需求，给你说下具体怎么弄～

在vue-cli 3.x版本中，Webpack的配置方式和v2有很大不同，我们不需要再手动修改webpack.dev.conf.js这类文件，而是通过项目根目录下的vue.config.js来做自定义配置。针对你要迁移的CopyWebpackPlugin配置，有两种实用方式：

方式一：直接在configureWebpack中添加插件 #

这是最贴近v2配置思路的方式，上手很快：

首先确保项目已安装copy-webpack-plugin（没装的话执行下面的命令）：

npm install copy-webpack-plugin --save-dev

然后在vue.config.js中写入配置：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 自定义Webpack配置
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, './static'), // 注意路径：v2中__dirname指向build目录，所以用../static；v3中vue.config.js在项目根目录，直接用./static即可
          to: 'static', // 对应v2里的config.dev.assetsSubDirectory，默认值就是static
          ignore: ['.*'] // 和原配置一致，忽略所有隐藏文件
        }
      ])
    ]
  }
};

方式二：用chainWebpack链式配置（vue-cli 3.x推荐方式） #

如果你想遵循vue-cli 3.x的链式配置风格，可以这么写：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  chainWebpack: config => {
    config.plugin('copy')
      .use(CopyWebpackPlugin, [
        [{
          from: path.resolve(__dirname, './static'),
          to: 'static',
          ignore: ['.*']
        }]
      ]);
  }
};

额外小提示 #

其实vue-cli 3.x默认会把项目根目录下public文件夹里的所有文件复制到输出目录，如果你能把静态资源迁移到public目录下，甚至不需要额外配置CopyWebpackPlugin，框架会自动帮你处理～

内容的提问来源于stack exchange，提问作者user762579