{"id":625,"date":"2020-12-10T00:51:17","date_gmt":"2020-12-10T00:51:17","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=625"},"modified":"2020-12-10T15:02:41","modified_gmt":"2020-12-10T15:02:41","slug":"notes-for-webpack-config-to-output-single-files-for-js-and-css-bundles","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/notes-for-webpack-config-to-output-single-files-for-js-and-css-bundles\/","title":{"rendered":"Notes for webpack configs to output single files for js and css bundles and more"},"content":{"rendered":"

I often use a site to build webpack configs https:\/\/createapp.dev\/ and I normally like to have my js and css compiled to one file each within \/dist<\/p>\n

Out of the box, it handles the entry\/output for the .js but a little bit needs to be added to do the same for the .css<\/p>\n

Here is an example webpack.config.js<\/p>\n

const webpack = require('webpack');\r\nconst path = require('path');\r\nconst CopyPlugin = require('copy-webpack-plugin');\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\r\nconst config = {\r\n  watch:true,\r\n  entry: ['.\/src\/styles.scss',\r\n    'react-hot-loader\/patch',\r\n    '.\/src\/index.js'\r\n  ],\r\n  output: {\r\n    path: path.resolve(__dirname, 'dist'),\r\n    filename: '.\/js\/bundle.js'\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.(js|jsx)$\/,\r\n        use: 'babel-loader',\r\n        exclude: \/node_modules\/\r\n      },\r\n      {\r\n        test: \/\\.css$\/,\r\n        use: [\r\n          MiniCssExtractPlugin.loader,\r\n          'css-loader'\r\n        ]\r\n      },\r\n      {\r\n        test: \/\\.scss$\/,\r\n        use: [\r\n          MiniCssExtractPlugin.loader,\r\n          'css-loader',\r\n          'sass-loader'\r\n        ]\r\n      },\r\n      {\r\n        test: \/\\.svg$\/,\r\n        use: 'file-loader'\r\n      },\r\n      {\r\n        test: \/\\.png$\/,\r\n        use: [\r\n          {\r\n            loader: 'url-loader',\r\n            options: {\r\n              mimetype: 'image\/png'\r\n            }\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  },\r\n  resolve: {\r\n    extensions: [\r\n      '.js',\r\n      '.jsx'\r\n    ],\r\n    alias: {\r\n      'react-dom': '@hot-loader\/react-dom'\r\n    }\r\n  },\r\n  devServer: {\r\n    contentBase: '.\/dist'\r\n  },\r\n  plugins: [\r\n    new CopyPlugin({\r\n      patterns: [{ from: 'src\/index.html' }],\r\n    }),\r\n    new MiniCssExtractPlugin({filename:'.\/css\/styles.css'}),\r\n   \r\n  ]\r\n};\r\n\r\nmodule.exports = config;<\/pre>\n
Some important parts added to have the css compile to a single file. First is that the scss file(s) need to be added as an entry:<\/p>\n
entry: ['.\/src\/styles.scss', 'react-hot-loader\/patch', '.\/src\/index.js' ]<\/pre>\n
Secondly, the MiniCssExtractPlugin needs to have an object with the destination css file name added to it as you see here:<\/p>\n
new MiniCssExtractPlugin({filename:'.\/css\/styles.css'})<\/pre>\n
 <\/p>\n
To process es6+ features like async\/await<\/strong><\/p>\n
We must add the below dependency:<\/p>\n
npm install @babel\/plugin-transform-runtime -D<\/code><\/pre>\n
Finally, alter the .babelrc to look like :<\/p>\n
{\r\n  \"presets\": [\r\n    \"@babel\/preset-env\",\r\n    \"@babel\/preset-react\"\r\n  ],\r\n  \"plugins\": [\r\n    [\"@babel\/transform-runtime\"]  \/\/ <= Add it here\r\n  ]  \r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
I often use a site to build webpack configs https:\/\/createapp.dev\/ and I normally like to have my js and css compiled to one file each within \/dist Out of the box, it handles the entry\/output for the .js but a little bit needs to be added to do the same for the .css Here is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,12],"tags":[],"class_list":["post-625","post","type-post","status-publish","format-standard","hentry","category-development","category-javascript"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":5,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":630,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions\/630"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}