added paths to the tsconfig so that it's not a pain to import stuff
This commit is contained in:
Arnaud Fauconnet
parent
3b430b9ff7
commit
1002d2fd0f
23
package.json
23
package.json
@ -12,16 +12,6 @@
|
||||
"@babel/core": "^7.19.3",
|
||||
"@babel/preset-env": "^7.19.3",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"babel-loader": "^8.2.5",
|
||||
"css-loader": "^6.7.1",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.6.1",
|
||||
"sass": "^1.55.0",
|
||||
"sass-loader": "^13.1.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"webpack": "^5.74.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.11.1",
|
||||
"@emotion/react": "^11.10.4",
|
||||
"@emotion/styled": "^11.10.4",
|
||||
"@mui/material": "^5.10.9",
|
||||
@ -30,9 +20,20 @@
|
||||
"@types/node-sass": "^4.11.3",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"babel-loader": "^8.2.5",
|
||||
"css-loader": "^6.7.1",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.55.0",
|
||||
"sass-loader": "^13.1.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-loader": "^9.4.1",
|
||||
"typescript": "^4.8.4"
|
||||
"tsconfig-paths-webpack-plugin": "^4.0.0",
|
||||
"typescript": "^4.8.4",
|
||||
"webpack": "^5.74.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,11 @@
|
||||
"target": "es5",
|
||||
"jsx": "react",
|
||||
"allowJs": true,
|
||||
"moduleResolution": "node"
|
||||
"moduleResolution": "node",
|
||||
"baseUrl": "./src",
|
||||
"paths" : {
|
||||
"@components/*": ["components/*"],
|
||||
"@scss/*": ["scss/*"],
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,65 +1,75 @@
|
||||
const path = require("path")
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin")
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
||||
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-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'
|
||||
]
|
||||
module.exports = (env, argv) => {
|
||||
const devMode = argv.mode !== 'production'
|
||||
|
||||
return {
|
||||
mode: devMode ? "development" : "production",
|
||||
entry: {
|
||||
bundle: path.resolve(__dirname, "src", "index.tsx")
|
||||
},
|
||||
output: {
|
||||
filename: "[name].[contenthash:10].js",
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
clean: true
|
||||
},
|
||||
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: /\.(sa|sc|c)ss$/,
|
||||
use: [
|
||||
// Creates `style` nodes from JS strings
|
||||
devMode ? 'style-loader' : MiniCssExtractPlugin.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"],
|
||||
alias: {
|
||||
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
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", ".css", ".scss"],
|
||||
alias: {
|
||||
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, "src", "html", "template.html"),
|
||||
filename: "index.html",
|
||||
title: "React with Webpack",
|
||||
})
|
||||
]
|
||||
plugins: [new TsconfigPathsPlugin()]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, "src", "html", "template.html"),
|
||||
filename: "index.html",
|
||||
title: "React with Webpack",
|
||||
}),
|
||||
].concat(devMode ? [] : [new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css'
|
||||
})])
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user