webpack: multiple input with multiple file-type outputs

Question

I have been able to compile "es6 standard" js files into native js using one entry point, I've also been able to use multiple entries to compile multiple files. Example:

webpack.config.js

module.exports = {
    entry: {
        front: "./static/src/js/Front.js",
        account: "./static/src/js/Account.js"
    },
    output: {
        path: "./static/dist",
        filename: "[name]-bundle.js"
    }
};

I have understood the concept of using modules/plugins to compile other files, with a little bit more...

modules: {
    loaders: [
      { tests: '/\.(css|scss)$/', loader: 'css-loader|style-loader'}
    ]
}

These solutions compile my files into JavaScript only, including my styles (scss, sass, css).

I am looking for a solution where I will have two (or multiple) different entry files, that each will produce its own output file with its own file-type (not just .js). I would not mind having multiple config modules. Thanks...

I am not sure what you are asking, from what I see you already have a way to extract your source code into multiple files, are you talking about removing the stylesheets from the bundle? — George
– George, Commented May 4, 2017 at 11:57
Yes! That's what I want to do - "Remove the stylesheets from the bundle and put it inside a css file" — Oniya Daniel
– Oniya Daniel, Commented May 5, 2017 at 12:19

George · Accepted Answer · 2017-05-05 12:43:12Z

2

Since your code is in SCSS, you need the SCSS loader and CSS loader, you also need extract-text-webpack-plugin, this is what brings out any text you have in the bundle into a separate file.

Also, because I know you will want to move the image and font files from the bundle I went ahead to add test for extracting the images/fonts, for those you will need to install file-loader. I hope that helps

const path = require('path');
const webpack = require('webpack');
const ExtractText = require('extract-text-webpack-plugin');

const extractCss= new ExtractText({ filename: 'styles/vendors.css' });
const extractSass = new ExtractText({ filename: 'styles/site.css' });

module.exports = (env) => {
  return {
    entry: {
      main: path.resolve(__dirname, '../', 'src', 'Front.js'),
    },
    output: {
      path: path.resolve(__dirname, '../', 'dist'),
      filename: 'js/[name]-bundle.js',
    },
    module: {
      rules: [
        { test: /\.css/, use: extractCss.extract(['css-loader']) },
        { test: /\.scss/, exclude: /node_modules/, use: extractSass.extract(['css-loader', 'sass-loader']) },

        { test: /\.(png|jpg)$/, exclude: /node_modules/, use: 'file-loader?outputPath=images/&publicPath=../'},
        { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=../'},
      ]
    },
    resolve: {
      modules: ['node_modules'],
    },
    plugins: [
      extractCss,
      extractSass,
    ]
  }
}

PS: I am in a hurry out, so I just cooked this up fast, when I come back I will review, in case you find any bugs, just comment below.

answered May 5, 2017 at 12:43

George

3,9739 gold badges58 silver badges90 bronze badges

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

3 Comments

Oniya Daniel Over a year ago

Thanks, this works nice except for the assets inside the scss files of other vendors like bootstrap. I get some error like this (this is just a little, the error message is so long) Module not found: Error: Can't resolve './fonts/glyphicons-halflings-regular.eot' ,

George Over a year ago

You can take those out if you are not making use of any fonts

Oniya Daniel Over a year ago

I'm using the font files

Collectives™ on Stack Overflow

webpack: multiple input with multiple file-type outputs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related