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/core": "^7.19.3",
"@babel/preset-env": "^7.19.3", "@babel/preset-env": "^7.19.3",
"@babel/preset-react": "^7.18.6", "@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/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
@ -30,9 +20,20 @@
"@types/node-sass": "^4.11.3", "@types/node-sass": "^4.11.3",
"@types/react": "^18.0.21", "@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6", "@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": "^18.2.0",
"react-dom": "^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", "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", "target": "es5",
"jsx": "react", "jsx": "react",
"allowJs": true, "allowJs": true,
"moduleResolution": "node" "moduleResolution": "node",
"baseUrl": "./src",
"paths" : {
"@components/*": ["components/*"],
"@scss/*": ["scss/*"],
}
} }
} }

View File

@ -1,15 +1,20 @@
const path = require("path") const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin") const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
module.exports = { module.exports = (env, argv) => {
mode: "development", const devMode = argv.mode !== 'production'
return {
mode: devMode ? "development" : "production",
entry: { entry: {
bundle: path.resolve(__dirname, "src", "index.tsx") bundle: path.resolve(__dirname, "src", "index.tsx")
}, },
output: { output: {
filename: "[name].[contenthash].js", filename: "[name].[contenthash:10].js",
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, "dist"),
clean: true
}, },
module: { module: {
rules: [ rules: [
@ -33,10 +38,10 @@ module.exports = {
} }
}, },
{ {
test: /\.scss$/, test: /\.(sa|sc|c)ss$/,
use: [ use: [
// Creates `style` nodes from JS strings // Creates `style` nodes from JS strings
"style-loader", devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS // Translates CSS into CommonJS
"css-loader", "css-loader",
// Compiles Sass to CSS // Compiles Sass to CSS
@ -50,16 +55,21 @@ module.exports = {
] ]
}, },
resolve: { resolve: {
extensions: [".tsx", ".jsx", ".js", ".css", ".scss"], extensions: [".tsx", ".jsx", ".js"],
alias: { alias: {
"@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"), "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
} },
plugins: [new TsconfigPathsPlugin()]
}, },
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "html", "template.html"), template: path.join(__dirname, "src", "html", "template.html"),
filename: "index.html", filename: "index.html",
title: "React with Webpack", title: "React with Webpack",
}) }),
] ].concat(devMode ? [] : [new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})])
}
} }