dependencies
npm install webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env
@babel/preset-react babel-loader css-loader mini-css-extract-plugin css-hot-loader --save-dev --verbose
npm install react react-dom redux react-redux --save --verbose
.babelrc
{
"presets": {
"@babel/preset-env",
"@babel/preset-react"
}
}
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build',
filename: 'app.js'
},
devtool: 'cheap-module-source-map',
module: {
rules: [{
test: /\.css$/,
use: [
'css-hot-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
}, {
test: /\.js$/,
exclude: /node_module/,
use: ['babel-loader']
}]
},
resolve: {
extensions: ['.js', '.json', '.wasm']
},
plugins: [
new MiniCssExtractPlugin({
filename: 'app.css'
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './',
hot: true
},
optimization: {}
}
usage
webpack-dev-server --config webpack.config.js --mode development