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:
.html
files.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
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.