added paths to the tsconfig so that it's not a pain to import stuff

This commit is contained in:
Arnaud Fauconnet 2022-10-13 17:06:43 +02:00
parent 3b430b9ff7
commit 1002d2fd0f
3 changed files with 86 additions and 70 deletions

View File

@ -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"
}
}

View File

@ -7,6 +7,11 @@
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
"moduleResolution": "node",
"baseUrl": "./src",
"paths" : {
"@components/*": ["components/*"],
"@scss/*": ["scss/*"],
}
}
}

View File

@ -1,15 +1,20 @@
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",
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].js",
path: path.resolve(__dirname, "dist")
filename: "[name].[contenthash:10].js",
path: path.resolve(__dirname, "dist"),
clean: true
},
module: {
rules: [
@ -33,10 +38,10 @@ module.exports = {
}
},
{
test: /\.scss$/,
test: /\.(sa|sc|c)ss$/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
@ -50,16 +55,21 @@ module.exports = {
]
},
resolve: {
extensions: [".tsx", ".jsx", ".js", ".css", ".scss"],
extensions: [".tsx", ".jsx", ".js"],
alias: {
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
}
},
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'
})])
}
}