62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
|
const path = require("path")
|
||
|
|
const HtmlWebpackPlugin = require("html-webpack-plugin")
|
||
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
mode: "development",
|
||
|
|
entry: {
|
||
|
|
bundle: path.resolve(__dirname, "src", "index.tsx")
|
||
|
|
},
|
||
|
|
output: {
|
||
|
|
filename: "[name].[contenthash].js",
|
||
|
|
path: path.resolve(__dirname, "dist")
|
||
|
|
},
|
||
|
|
module: {
|
||
|
|
rules: [
|
||
|
|
{
|
||
|
|
test: /\.tsx?/,
|
||
|
|
use: 'ts-loader',
|
||
|
|
exclude: /node_modules/
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.jsx?$/,
|
||
|
|
include: path.resolve(__dirname, 'src'),
|
||
|
|
exclude: /node_modules/,
|
||
|
|
use: {
|
||
|
|
loader: 'babel-loader',
|
||
|
|
options: {
|
||
|
|
presets: [
|
||
|
|
['@babel/preset-env', { "targets": "defaults" }],
|
||
|
|
'@babel/preset-react'
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.s[ac]ss$/i,
|
||
|
|
use: [
|
||
|
|
// Creates `style` nodes from JS strings
|
||
|
|
"style-loader",
|
||
|
|
// Translates CSS into CommonJS
|
||
|
|
"css-loader",
|
||
|
|
// Compiles Sass to CSS
|
||
|
|
"sass-loader",
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
test: /\.css$/i,
|
||
|
|
use: [MiniCssExtractPlugin.loader, "css-loader"],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
resolve: {
|
||
|
|
extensions: [".tsx", ".jsx", ".js"],
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
new HtmlWebpackPlugin({
|
||
|
|
template: path.join(__dirname, "src", "html", "template.html"),
|
||
|
|
filename: "index.html",
|
||
|
|
title: "React with Webpack",
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}
|