Get one css file from webpack multiple entry points

Question

I use webpack for my project. I have 2 entry points: the first one's for CSS files with CSS modules, the second - for global css files. Main.css isn't imported from any file in project so I made a special entry point for it.

const extractStylesCss = new ExtractTextPlugin('styles.css');  

entry: {
    'main': ["./src/index.tsx"],
    'styles': "./src/main.css"
},
module: {
    loaders: [ 
        {
            test: /^.*\.css$/,
            exclude: [
                path.join(__dirname, 'src/main.css')
            ],

            loader: extractStylesCss.extract(
                "style",
                `css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
            )
        },
        {
            test: /main\.css$/,
            loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
        },
    ]
},
plugins: [
    extractStylesCss
],
output: {
    path: path.join(__dirname, "/docs"),
    filename: "[name].js"
}

I need only one output file - styles.css. I know that ExtractTextPlugin generates one bundle per entry point, but is there any possibility to get one file?

Michael Jungo · Accepted Answer · 2017-03-07 21:41:22Z

6

You had the right idea by adding it to the entry, unfortunately you created another bundle. Each property of the entry object creates a separate bundle, this is why you also get a style.js even though it only has the webpack bootstrap code in it and extract-text-webpack-plugin just overwrites the CSS file if you use the same output file for both.

What you really want is adding the main.css to the main bundle (it should conceptually be part of it, not in a separate bundle). The entries also accept an array with multiple entry points. With the following entry the CSS will automatically be combined:

entry: {
    main: ['./src/index.tsx', './src/main.css']
},

answered Mar 7, 2017 at 21:41

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Get one css file from webpack multiple entry points

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related