{"id":5351,"date":"2018-08-10T11:16:35","date_gmt":"2018-08-10T09:16:35","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=5351"},"modified":"2020-02-09T11:11:55","modified_gmt":"2020-02-09T10:11:55","slug":"webpack-sass-multiple-entry-points","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/webpack-sass-multiple-entry-points-5351\/","title":{"rendered":"Webpack: compile SASS in own file with multiple entry points"},"content":{"rendered":"\n<p>Webpack allows specifying multiple entry points, for example, to compile multiple JavaScript files via Babel. This post shows how to compile SASS to its own file when using various entry points.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">The problem<\/h2>\n\n\n\n<p>Until now, I always had something like that as the <code class=\"lang-js\">entry<\/code> in my Webpack config:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">entry: &#91;<span class=\"hljs-string\">'.\/assets\/src\/js\/functions.js'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/frontend.scss'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/editor.scss'<\/span>],<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With various loaders, I compiled the JavaScript via Babel to a <code class=\"lang-markup\">functions.js<\/code> and the SASS files to the CSS files <code class=\"lang-markup\">frontend.css<\/code> and <code class=\"lang-markup\">editor.css<\/code>. Now I wanted to add a second JavaScript file as an entry, which should be compiled to a separate file. The <a href=\"https:\/\/webpack.js.org\/concepts\/entry-points\/\">Webpack documentation on entry points<\/a> shows how to define multiple entry points, and that was my first attempt:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">entry: {\n    <span class=\"hljs-attr\">functions<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/js\/functions.js'<\/span>,\n    <span class=\"hljs-attr\">glide<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/js\/glide.js'<\/span>,\n    <span class=\"hljs-attr\">frontend<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/scss\/frontend.scss'<\/span>,\n    <span class=\"hljs-attr\">editor<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/scss\/editor.scss'<\/span>,\n},<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That worked somehow but had its problems. For every CSS file, I got a JavaScript file with the same name. Theoretically, I could ignore them, but that would not be very satisfying.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The solution<\/h2>\n\n\n\n<p>In the afterthought, the solution is relatively simple: I write the SASS files in an array with one of the JavaScript files and get my wanted solution of two JavaScript and two CSS files.<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">entry: {\n    <span class=\"hljs-attr\">functions<\/span>: &#91;<span class=\"hljs-string\">'.\/assets\/src\/js\/functions.js'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/frontend.scss'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/editor.scss'<\/span>],\n    <span class=\"hljs-attr\">glide<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/js\/glide.js'<\/span>,\n},<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That could be a Webpack 4 config file with the solution:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> path = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'path'<\/span>);\n\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n    <span class=\"hljs-attr\">mode<\/span>: <span class=\"hljs-string\">'development'<\/span>,\n    <span class=\"hljs-attr\">entry<\/span>: {\n        <span class=\"hljs-attr\">functions<\/span>: &#91;<span class=\"hljs-string\">'.\/assets\/src\/js\/functions.js'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/frontend.scss'<\/span>, <span class=\"hljs-string\">'.\/assets\/src\/scss\/editor.scss'<\/span>],\n        <span class=\"hljs-attr\">glide<\/span>: <span class=\"hljs-string\">'.\/assets\/src\/js\/glide.js'<\/span>,\n    },\n    <span class=\"hljs-attr\">output<\/span>: {\n        <span class=\"hljs-attr\">path<\/span>: path.resolve(__dirname, <span class=\"hljs-string\">'assets'<\/span>),\n        <span class=\"hljs-attr\">filename<\/span>: <span class=\"hljs-string\">'dist\/js\/&#91;name].js'<\/span>,\n    },\n    <span class=\"hljs-attr\">module<\/span>: {\n        <span class=\"hljs-attr\">rules<\/span>: &#91;\n            <span class=\"hljs-comment\">\/**\n             * Running Babel on JS files.\n             *\/<\/span>\n            {\n                <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-regexp\">\/\\.js$\/<\/span>,\n                <span class=\"hljs-attr\">exclude<\/span>: <span class=\"hljs-regexp\">\/node_modules\/<\/span>,\n                <span class=\"hljs-attr\">use<\/span>: {\n                    <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'babel-loader'<\/span>,\n                    <span class=\"hljs-attr\">options<\/span>: {\n                        <span class=\"hljs-attr\">plugins<\/span>: &#91;<span class=\"hljs-string\">'lodash'<\/span>],\n                        <span class=\"hljs-attr\">presets<\/span>: &#91;<span class=\"hljs-string\">'@wordpress\/default'<\/span>]\n                    }\n                }\n            },\n            {\n                <span class=\"hljs-attr\">test<\/span>: <span class=\"hljs-regexp\">\/\\.scss$\/<\/span>,\n                <span class=\"hljs-attr\">use<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'file-loader'<\/span>,\n                        <span class=\"hljs-attr\">options<\/span>: {\n                            <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'dist\/css\/&#91;name].css'<\/span>,\n                        }\n                    },\n                    {\n                        <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'extract-loader'<\/span>\n                    },\n                    {\n                        <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'css-loader?-url'<\/span>\n                    },\n                    {\n                        <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'postcss-loader'<\/span>\n                    },\n                    {\n                        <span class=\"hljs-attr\">loader<\/span>: <span class=\"hljs-string\">'sass-loader'<\/span>\n                    }\n                ]\n            }\n        ]\n    },\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here are the <code class=\"lang-js\">devDependencies<\/code> from my <code class=\"lang-markup\">package.json<\/code> (more than needed for that example):<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-string\">\"devDependencies\"<\/span>: {\n  <span class=\"hljs-attr\">\"@wordpress\/babel-preset-default\"<\/span>: <span class=\"hljs-string\">\"^1.3.0\"<\/span>,\n  <span class=\"hljs-attr\">\"autoprefixer\"<\/span>: <span class=\"hljs-string\">\"^8.5.0\"<\/span>,\n  <span class=\"hljs-attr\">\"babel-core\"<\/span>: <span class=\"hljs-string\">\"^6.26.0\"<\/span>,\n  <span class=\"hljs-attr\">\"babel-loader\"<\/span>: <span class=\"hljs-string\">\"^7.1.2\"<\/span>,\n  <span class=\"hljs-attr\">\"babel-preset-env\"<\/span>: <span class=\"hljs-string\">\"^1.6.0\"<\/span>,\n  <span class=\"hljs-attr\">\"css-loader\"<\/span>: <span class=\"hljs-string\">\"^0.28.7\"<\/span>,\n  <span class=\"hljs-attr\">\"extract-loader\"<\/span>: <span class=\"hljs-string\">\"^2.0.1\"<\/span>,\n  <span class=\"hljs-attr\">\"file-loader\"<\/span>: <span class=\"hljs-string\">\"^1.1.11\"<\/span>,\n  <span class=\"hljs-attr\">\"lodash-webpack-plugin\"<\/span>: <span class=\"hljs-string\">\"^0.11.5\"<\/span>,\n  <span class=\"hljs-attr\">\"node-sass\"<\/span>: <span class=\"hljs-string\">\"^4.9.0\"<\/span>,\n  <span class=\"hljs-attr\">\"postcss-cli\"<\/span>: <span class=\"hljs-string\">\"^5.0.0\"<\/span>,\n  <span class=\"hljs-attr\">\"postcss-loader\"<\/span>: <span class=\"hljs-string\">\"^2.0.6\"<\/span>,\n  <span class=\"hljs-attr\">\"sass-loader\"<\/span>: <span class=\"hljs-string\">\"^7.0.1\"<\/span>,\n  <span class=\"hljs-attr\">\"svg-spritemap-webpack-plugin\"<\/span>: <span class=\"hljs-string\">\"^2.6.0\"<\/span>,\n  <span class=\"hljs-attr\">\"svgo\"<\/span>: <span class=\"hljs-string\">\"^1.0.5\"<\/span>,\n  <span class=\"hljs-attr\">\"svgo-loader\"<\/span>: <span class=\"hljs-string\">\"^2.1.0\"<\/span>,\n  <span class=\"hljs-attr\">\"webpack\"<\/span>: <span class=\"hljs-string\">\"^4.8.3\"<\/span>,\n  <span class=\"hljs-attr\">\"webpack-cli\"<\/span>: <span class=\"hljs-string\">\"^3.0.8\"<\/span>\n},<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And that is the content of my <code class=\"lang-markup\">postcss.config.js<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">module<\/span>.exports = {\n    <span class=\"hljs-attr\">plugins<\/span>: {\n        <span class=\"hljs-attr\">autoprefixer<\/span>: { <span class=\"hljs-attr\">browsers<\/span>: &#91;<span class=\"hljs-string\">'last 2 versions'<\/span>], <span class=\"hljs-attr\">grid<\/span>: <span class=\"hljs-literal\">true<\/span> }\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"<p>Webpack allows specifying multiple entry points, for example, to compile multiple JavaScript files via Babel. This post shows how to compile SASS to its own file when using various entry points.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-5351","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"b4df895970844e54927f021f6897f424","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/b4df895970844e54927f021f6897f424"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=5351"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5351\/revisions"}],"predecessor-version":[{"id":5954,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5351\/revisions\/5954"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=5351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=5351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=5351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}