Webpack build - separate html, css and js output paths

Question

I'm writing a React app that integrates with an existing Flask project. If I build the app, take the index.html and move it into Flask's templates, take the js and css folders from the build and move them to Flask's static folder, everything works fine.

What I'd like to do now is ensure that a one step build is possible, which would mean building the React app in such a way that index.html is output directly into Flask's templates and statics are output directly into Flask's statics. I don't know if this is at all possible, though.

Is it possible to configure Webpack to use separate output paths for HTML, js and css when making a build? (Extra info, I'm using an ejected create-react-app to be able to go through Webpack config.)

If it's not possible, is there a different way I could ensure a one step build (e.g. build to default, then move to separate folders automatically)?

Michael Jungo · Accepted Answer · 2017-03-16 15:59:10Z

3

It is very simple to configure where the output should go. First and foremost, you need to set output.path to your flask directory. For instance if you kept the structure of Create React App (CRA) after ejecting and the flask directory is a sibling directory to your app, the output would look like this:

output: {
  path: path.resolve(__dirname, '../../flask'),
  filename: 'static/js/[name].[chunkhash:8].js',
  chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
  publicPath: publicPath
}

Now you need to change where the index.html goes, and as CRA uses html-webpack-plugin you can set the filename option to template/index.html, similarly to output.filename:

new HtmlWebpackPlugin({
  inject: true,
  filename: 'template/index.html',
  template: paths.appHtml,
  minify: {
    // Minify options
  }
}),

As CRA already configured the CSS outputs to be in static/css you don't need to change anything for it.

With the default CRA app the content of the flask directory is a follows:

flask
├─ asset-manifest.json
├─ static
│  ├─ css
│  │  ├─ main.9a0fe4f1.css
│  │  └─ main.9a0fe4f1.css.map
│  ├─ js
│  │  ├─ main.1ca7fdbb.js
│  │  └─ main.1ca7fdbb.js.map
│  └─ media
│     └─ logo.5d5d9eef.svg
└─ template
  └─ index.html

answered Mar 16, 2017 at 15:59

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dnmh Over a year ago

Thank you for the detailed answer!

Collectives™ on Stack Overflow

Webpack build - separate html, css and js output paths

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related