CODEWITHSUNDEEP
webpack
ifelse
ifelse

Reputation: 319

Webpack copy files from dist to another directory

Hope I'm saying this correctly. I have a Vue2 project that I need to create multiple bundle.js/css and copy to different directories. I would need all the files from the dist folder and copy to another.

I've been searching online but confused with all the different approaches which is not working for me. Below are a few approaches I tried.

Approach 1 = webpack.prod.conf.js

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

Approach 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')
  },

Approach 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
  }
}

Upvotes: 0

Views: 3126

Answers (1)

ippi
ippi

Reputation: 10177

The answer can be found here: https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

It may look something like this (this is not tested (sorry I'm lazy!), but I've used similar code many times and I guarantee you can modify the config this way, but better have a look at those args to be sure. )

// 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;             
      })
  }
}

You can peek at the current config using vue inspect > somefile.js. It's super useful with webchainpack because it has comments with what stuff you can tap into.

Upvotes: 1

Related Questions