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 an example webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
const webpack = require('webpack'); const path = require('path'); const CopyPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const config = { watch:true, entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ], output: { path: path.resolve(__dirname, 'dist'), filename: './js/bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }, { test: /\.svg$/, use: 'file-loader' }, { test: /\.png$/, use: [ { loader: 'url-loader', options: { mimetype: 'image/png' } } ] } ] }, resolve: { extensions: [ '.js', '.jsx' ], alias: { 'react-dom': '@hot-loader/react-dom' } }, devServer: { contentBase: './dist' }, plugins: [ new CopyPlugin({ patterns: [{ from: 'src/index.html' }], }), new MiniCssExtractPlugin({filename:'./css/styles.css'}), ] }; module.exports = config; |
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:
|
1 |
entry: ['./src/styles.scss', 'react-hot-loader/patch', './src/index.js' ] |
Secondly, the MiniCssExtractPlugin needs to have an object with the destination css file name added to it as you see here:
|
1 |
new MiniCssExtractPlugin({filename:'./css/styles.css'}) |
To process es6+ features like async/await
We must add the below dependency:
|
1 |
npm install @babel/plugin-transform-runtime -D |
Finally, alter the .babelrc to look like :
|
1 2 3 4 5 6 7 8 9 |
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ ["@babel/transform-runtime"] // <= Add it here ] } |