Webpack：使用多个构建目标

Question

Given an (Angular-)Webapp with a Webpack-buildprocess I would like to add several build-targets to my Webpack configuration.

There are plenty tutorials on how to modify your webpack.config at compile time, which is already helpful (and probably all I need) to get dev and prod builds running.

However I was hoping that there is a way to parametrize the build process so that different files are used for the build-process.

Question

How do i configure Webpack to replace all *.js / *.html -Files with files called *.mobile.js / *.mobile.html (if available) during the build-step?

Bonusquestion: How do I exclude environment-specific import statements via webpack-config?

Example

I got several view/controller-pairs which are linked via Angulars $stateprovider . In the mobile version of the webapp most of the HTML -views should be a mobile-optimized template.

If I use several entry-points for webpack to generate a desktop-version and a mobile-version I would have to rewrite every file where HTML-Files are required or imported for each of my build-targets and specify the new filenames manually.

This would cause a lot of code-duplication and is hard to maintain.

Answer 1

I ended up using the following in my webpack.config

const target = env && env.mobile ? 'mobile' : 'desktop'

resolve: {
    extensions: [`.${target}.js`, '.js', `.${target}.html`, '.html']
}