Question

希望我说的没错。我有一个Vue2项目，我需要创建多个bundle.js / css并将其复制到其他目录。我需要dist文件夹中的所有文件并将其复制到另一个文件中。

我一直在网上搜索，但是对所有不适用于我的不同方法感到困惑。以下是我尝试过的几种方法。

方法1 = webpack.prod.conf.js

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),

方法2 = webpack.prod.conf.js

entry: {
  app: './src/app.js',
},
output: {
    path: config.build.assetsRoot,
    //filename: utils.assetsPath('js/[name].[chunkhash].js'),
    //chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    filename: utils.assetsPath('js/[name].js'),
    chunkFilename: utils.assetsPath('js/[id].js')
  },

方法3 = index.js

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

Answer 1

可以在这里找到答案：https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

它可能看起来像这样（未经测试（对不起，我很懒！），但是我已经使用了类似的代码很多次，并且我保证您可以通过这种方式修改配置，但是最好看看那些args。）

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        console.log(args);
        args[0].from = "something"; //modify 
        args.push({from:"...", to:".."}); //add
        return args;             
      })
  }
}

您可以使用vue inspect > somefile.js来查看当前配置。对于webchainpack来说，它超级有用，因为它带有注释以及可以使用的内容。

Webpack将文件从dist复制到另一个目录

1 个答案: