CODEWITHSUNDEEP
webpack
voidmind
voidmind

Reputation: 156

Is there a way to make multiple production builds with webpack?

I have to deploy my web app on different servers and to do that, I need to set different relative paths (from each server's www root) to the bundled JS file in index.html (this is due to how authentication is configured so please just roll with it)

Right now I manually open ./dist/index.html and edit the script tag's SRC attribute to what it needs to be for server #1, upload my code to it and repeat this process for server #2

Manual edit for Server #1:
<script type="text/javascript" src="/path_to/my_project/index_bundle.js"></script>

Manual edit for Server #2:
<script type="text/javascript" src="/completely/different/path_to/my_project/index_bundle.js"></script>

I'd like to build to multiple dist folders (i.e. ./dist_server1, ./dist_server2, etc.) and have the different script tag's relative path hardcoded in their respective index.html. Basically I'd just like to save myself some manual work. Is there a way to do that with webpack?

Upvotes: 2

Views: 2281

Answers (1)

voidmind
voidmind

Reputation: 156

I figured it out. You can create separate webpack.config.server_name.js files for each build you want. Then:

  1. Set a different output paths in each config file: path.join(__dirname, '/server1') or path.join(__dirname, '/server2')
  2. Set output.publicPath: '/path_to/my_project/' or output.publicPath: '/completely/different/path_to/my_project/'
  3. In package.json, add different script commands to use those config files like:
    • "server1": "webpack --config webpack.config.server1.js -p"
    • "server2": "webpack --config webpack.config.server2.js -p"
  4. To build them, run "npm run server1" and "npm run server2"

Upvotes: 2

Related Questions