Ce package fourni les dépendances et un fichier de config de webpack pour un projet utilisant js/react/typescript
Installer le package
npm i -D @fzed51/webpack-config
Après l'installation, lancer le script ./node_modules/.bin/webpack-config-init
. Le script vous demande si vous voulez créer le fichier webpack.config.js
et modifier le fichier package.json
automatiquement.
Créer le fichier webpack.config.js
manuellement.
const config = require("@fzed51/webpack-config");
module.exports = config({
useReact: true,
useTypescript: true,
htmlWebpackPlugin: true,
cleanOutput: true,
});
ci-dessus, paramétrage par défaut.
ou
const config = require("@fzed51/webpack-config");
module.exports = config({
useReact: true,
useTypescript: true,
htmlWebpackPlugin: {
template: "./src/index.html",
},
cleanOutput: true,
});
ou
const config = require("@fzed51/webpack-config");
module.exports = config({
useReact: false,
useTypescript: true,
htmlWebpackPlugin: false,
cleanOutput: true,
});
ou
const config = require("@fzed51/webpack-config");
module.exports = config({
useReact: true,
useTypescript: true,
htmlWebpackPlugin: false,
cleanOutput: {
exclude: ["static/*.*"],
},
});
Ajouter la clé scripts au fichier package.json
manuellement.
"scripts": {
"build": "webpack -p --mode production",
"dev": "webpack-dev-server -d --mode development --hot --open"
},
Ajoute dans la configuration la règle pour compiler le code React et JSX.
Utilise @babel/preset-react
Ajoute dans la configuration la règle pour compiler du code Typescript
Utilise @babel/preset-typescript
Cette option peut prendre plusieurs types de valeur.
false
: ne génère pas de fichierindex.html
true
: génère un fichierindex.html
de baseobject
: un objet de configurationtemplate : './chemin/vers/template.html'
: génère un fichierindex.html
prenant pour template un fichierhtml
tiers.title : 'Titre de la page'
: Modifie le titre de la page.
Utilise le plugin html-webpack-plugin
Nettoie le dossier de sortie de webpack. par défaut le dossier ./dist
. Cette option
peut prendre différent valeur :
false
: ne netoie pas le dossier de sortietrue
: netoie le dossier de sortieobject
: un objet de configurationexclude : ['pattern/*.*', 'fichier.txt']
: exclu un certain nombre de fichiers du nettoyage. La référence des patterns est toujours le dossier de sortie de webpack.
Utilise le plugin clean-webpack-plugin
- babel@7 avec preset env, react et typescript
- react@16
- webpack@4
npm i @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-json-strings @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/preset-env @babel/preset-react @babel/preset-typescript @types/react @types/react-dom @types/react-redux @types/webpack babel-loader clean-webpack-plugin css-loader file-loader html-webpack-plugin inquirer react react-dom react-redux redux redux-thunk sass sass-loader style-loader typescript url-loader webpack webpack-cli webpack-dev-server