6

While I clearly am no webpack expert, I usually figure/find out what I need to modify in order to achieve what I need. However, I lost more than a day on this one, even though it seems fairly simple:

I want to add an index.html to the build, after building, by copy-ing it from a folder.

I tried adding this to configureWebpack, in vue.config.js:

plugins: [
  new CopyPlugin([{
    from: 'deploy',
    to: '/',
    force: true,
    copyUnmodified: true
  }])
]

(the only file in deploy folder is this index.html).

I also tried various versions of chainWebpack, mostly picked from github discussions, trying to tap into plugins like html, move-index and copy. However, most of what I found on github breaks the build for me.

Not even simple attempts, where I just try to tap and console don't seem to work:

chainWebpack: config => {
  config
    .plugin('html')
    .tap(args => {
      console.log(args);
      return args;
    });
},

outputs: 

Building for production as library (commonjs,umd,umd-min)...[]
ERROR  TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)

What I figured out so far:

  • CopyPlugin either doesn't work or it has an exception for .html files.
  • There're are at least two plugins: (move-index & html) which probably interfere with my copy. I haven't figure out how to push my change to the back of the queue.

I also tried with a test.html and I also tried placing a different extension on my file .txt and overriding it when copying it, back into .html. Most times I end up with errors.

Is there a relatively straight forward way to tap into vue-cli-serve's build command and simply copy an index.html to the folder?

The build command I'm using is:

vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts

Please note it's a --target lib build, which doesn't output an index.html into the dist folder, but a demo.html. So I'd advise testing any solution against a --target lib build, as it clearly has a different output than normal builds.

Here's the output of vue inspect: https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript
and here's the current contents of my vue.config.js: https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript , where configWebpack and chainWebpack are attempts at addressing/peeking into the above issue.

I'm using @vue/cli 4.2.3 and vue 2.6.11 with webpack 4.42.1

tao
  • 82,996
  • 16
  • 114
  • 150

2 Answers2

2

I figured out a way around it, by simply running npm i copyfiles -D and adding this bit to the build script:

 && copyfiles -f ./deploy/* dist/Recommender

It's not a proper answer to the problem, it's a way around it. But it works :).

Still interested in how this could be chained to the webpack build script properly.

tao
  • 82,996
  • 16
  • 114
  • 150
2

I know this is an old issue, but I figured I'd add some more details for anyone still having issues with this in Vue 3.

I was able to achieve a similar output with vue 3.0.0, @vue/cli-service 4.5.0, webpack 4.46.0 and copy-webpack-plugin 6.4.1 using the following configs:

vue.config.js

const CopyPlugin = require("copy-webpack-plugin");

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    chainWebpack: (config) => {
        // Disable HTML Generation.
        config.plugins.delete("html");
        config.plugins.delete("preload");
        config.plugins.delete("prefetch");

        // Copy all contents of the "static" src directory
        // to the destination's root.
        config.plugin("copy").use(CopyPlugin, [
          {
            patterns: [{ from: "./static", to: "./" }],
          },
        ]);
    },
};

npm script:

vue-cli-service build --target lib --inline-vue --name app src/main.js

Note: the "inline-vue" argument forces embedding Vue into the bundle (see https://cli.vuejs.org/guide/build-targets.html#library).

Semiaddict
  • 179
  • 2
  • 6