- Progressive Web Apps with React
- Scott Domes
- 194字
- 2021-07-08 09:36:20
Creating a custom script
Make a new folder in the root of your directory and name it scripts. Inside, make a file called copy_assets.js.
In here, we will copy everything in public to build, excluding our index.html.
To do this (you guessed it), we need one more package; run yarn add fs-extra.
Then, require it inside copy_assets.js, as illustrated:
var fs = require('fs-extra');
fs-extra is a package used for manipulating files in a Node environment. It has a method called copySync, which we'll use here.
The code is rather straightforward:
fs.copySync('public', 'build', {
dereference: true,
filter: file => file !== 'public/index.html'
});
This says copy everything in the public folder to the build folder, except the index.html file.
Now, to run this command whenever we build, add it to the build script in package.json:
"scripts": {
"build": "node scripts/copy_assets.js && node_modules/.bin/webpack --config
webpack.config.prod.js",
"start": "node_modules/.bin/webpack-dev-server"
},
It's a good idea to put the copy_assets command before our Webpack command, just to ensure that we don't accidentally copy any JavaScript assets in public without transpiling them.