Webpack is a module bundler. It takes all of your code and assets, such as Javascript, CSS, images, etc., and bundles them together into a format that can be efficiently served to the browser.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
// use css modules
{
test: /\\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// importLoaders: 1 allows css to resolve @import
importLoaders: 1,
// allow module css to work
modules: true,
},
},
],
include: /\\.module\\.css$/,
},
// use css only
{
test: /\\.css$/,
use: ['style-loader', 'css-loader'],
exclude: [/\\.module\\.css$/, /node_modules/],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
],
// Attempt to resolve these extensions in order.
// Original: import MyComponent from '../my-componenet.jsx'
// After passed in .jsx: import MyComponent from '../my-component'
resolve: {
extensions: ['.js', '.jsx'],
},
};