Sometimes you have an irritating problem that you have to solve even though it doesn’t really add value. Yesterday I had one of these problems. I wanted to overrule the key name (app) used for the default webpack entry by vue-cli 3 using webpack-chain. This key determines the name of the file that is generated by the build command. It seemed like such a simple change, which it is once you understand how, but it took me sometime to figure out.
I’m writing a Vue plugin and wanted the build version to be called ‘plugin’ instead of ‘app’. I thought it would be a quick change. Took me a little more time than expected, because of the way webpack-chain works and me not reading the documentation properly.
Anyway here are the steps if you want to do the same.
1. Rename the ‘src’ directory to ‘plugin’ (optional, but I like it)
2. Add the `vue.config.js` file and add the following code
module.exports = { chainWebpack: config => { // Remove the old 'app' entry config .entryPoints .delete('app') // Add the new 'plugin' entry config .entry('plugin') .add('./plugin/index.js') config .resolve .alias .set('@', path.resolve(__dirname, 'plugin')) }, ... }
It first removes the old webpack entry (app), adds a new entry (plugin) and finally changes the alias from ‘src’ to ‘plugin’.
3. Update the `moduleNameMapper` in the `jest.config.js`
... moduleNameMapper: { '^@/(.*)$': '/plugin/$1' }, ...
That should do the trick. Do you want to test it?
Generate the resolved webpack file using the following command.
$ vue inspect > webpack.config.resolved
The final entry in the resolved webpack file should be the entry point.
{ ... entry: { plugin: [ './plugin/index.js' ] } }
For convenience I add the following entry to the `scripts` in the `package.json` file.
{ ... "scripts": { ... "inspect": "vue inspect > webpack.config.resolved" } ... }
Now you can run npm run inspect
to check the resolved webpack configuration file. Handy!
To ensure everything works as expect test and build the project using the following commands.
$ npm run test:unit
and
$ npm run build
In the build directory dist
there should be a file js/plugin..js
.
Hope this helps someone. Happy coding!