2019-10-17: Création
2019-10-27: Plusieurs bundler
Créer un dossier qui deviendra le dossier projet de webpack
$ mkdir hello-webpack
$ cd hello-webpack
$ npm init -y
Version avec npm :
package.json:
{ "name": "hello-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Version avec yarnpkg :
$ yarnpkg init
Le fichier package.json:
{ "name": "hello-webpack", "version": "1.0.0", "description": "tuto webpack", "main": "index.js", "author": "JC_onLine", "license": "MIT" }
$ yarnpkg add webpack webpack-cli $ ll total 136 drwxr-xr-x 315 jc jc 12288 oct. 17 23:36 node_modules -rw-r--r-- 1 jc jc 231 oct. 17 23:36 package.json -rw-r--r-- 1 jc jc 120715 oct. 17 23:36 yarn.lock $ cat package.json { "name": "hello-webpack", "version": "1.0.0", "description": "tuto webpack", "main": "index.js", "author": "JC_onLine", "license": "MIT", "dependencies": { "webpack": "^4.41.2", "webpack-cli": "^3.3.9" } }
Il faut ajouter un script dans package.json pour spécifier l'appel de webpack:
Ici le script s’appellera build:
{ "name": "hello-webpack", "version": "1.0.0", "description": "tuto webpack", "main": "index.js", "scripts": { "build": "webpack --mode development" }, "author": "JC_onLine", "license": "MIT", "dependencies": { "webpack": "^4.41.2", "webpack-cli": "^3.3.9" } }
Les dossiers par défaut sont :
$ tree -L 1 . ├── dist ├── node_modules ├── package.json ├── src └── yarn.lock
Il est possible d'ajouter un serveur de développement :
$ yarnpkg add webpack-dev-server --dev
"devDependencies": { "webpack-dev-server": "^3.8.2" }
source: yarnpkg.com
On peut le lancé un la main
$ yarnpkg webpack-dev-server
Ou créer un script dans package.json :
Source: yarnpkg.com/fr/docs/cli/run
"scripts": { "build": "webpack --mode development --watch", "dev": "webpack-dev-server --mode development" },
Il faut créer un fichier webpack.config.js à la racine du projet :
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }
Cette config spécifie les nom de fichiers d“entrées / sorties
Les loaders permet un traitement sur des fichiers.
Ce loader est utilisé pour transpiler du ECMA script 6 en ECMA script 5 pour les anciens navigateurs.
L'installation de babel-loader
$ yarnpkg add -D babel-loader @babel/core @babel/preset-env
$yarnpkg add -D babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin
La configuration de webpack :
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module:{ rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] } }
Création du fichier .babelrc
c'est un simple objet json qui comporte les paramètres de réglages de babel:
{ "presets": [ "@babel/preset-env" ] }
Mise à jour de webpack.config.js
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module:{ rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test:/\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] } ] } }
Installation des modules :
$ yarnpkg add -D css-loader $ yarnpkg add -D style-loader
Cela met à jour le fichier package.json:
{ "name": "hello-webpack", "version": "1.0.0", "description": "tuto webpack", "main": "index.js", "scripts": { "build": "webpack --mode development", "dev": "webpack-dev-server --mode development --watch" }, "author": "JC_onLine", "license": "MIT", "dependencies": { "webpack": "^4.41.2", "webpack-cli": "^3.3.9" }, "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "style-loader": "^1.0.0", "webpack-dev-server": "^3.8.2" } }
Exemple d'appel css dans un fichier js:
import { add } from './math'; import './app.css'; const res = add(1 , 2); console.log(res);
La doc: sass-loader
La configuration de webpack.config.js :
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module:{ rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test:/\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] }, { 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', ], }, ] } }
Installation du loader :
$ yarnpkg add -D sass-loader node-sass
Cela met à jour le fichier package.json:
{ "name": "hello-webpack", "version": "1.0.0", "description": "tuto webpack", "main": "index.js", "scripts": { "build": "webpack --mode development", "dev": "webpack-dev-server --mode development --watch" }, "author": "JC_onLine", "license": "MIT", "dependencies": { "webpack": "^4.41.2", "webpack-cli": "^3.3.9" }, "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "node-sass": "^4.12.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "webpack-dev-server": "^3.8.2" } }
Exemple de code sass :
file.scss $body-color: red; body { color: $body-color; }
Exemple d'appel du fichier file.scss :
import style from './style.scss';
Source: html-webpack-plugin
Principe: Générer une page html depuis le code js en s'appuyant sur un template html qui est dans le dossier src.
Le lien de la balise <script> vers le chemin js sera renseigné automatiquement avec le hash dans le nom du fichier js. Le hash dans le nom du fichier js sert à obliger le navigateur à recharger ce fichier et de pas utilisé le précédant qui est en cache.
Installation :
$ yarnpkg add -D html-webpack-plugin
Paramétrage dans webpack.config.js:
const path = require('path'); const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); [...] module:{ [...] }, plugins: [ new webpack.ProgressPlugin(), new htmlWebpackPlugin({ hash: true, title: 'Webpack 4 :)', template: './src/index.html' }) ] }
Installation de Bootstrap 4
Source: getbootstrap.com
$ yarnpkg add jquery popper popper.js bootstrap
Installation de Foundation Zurb
Source: foundation.zurb.com
$ yarnpkg add what-input foundation-sites
Installation de Sass
Source: sass-lang.com
$ yarnpkg add sass
Installation de compass
Source: npmjs.com/package/compass
$ yarnpkg add compass
Installation de compass-mixins
Source: npmjs.com/package/compass-mixins
$ yarnpkg add compass-mixins
Installation de create-react-app
Source: ReactJS
$ yarnpkg add create-react-app
Source: How_to_set_up_React_webpack_and_Babel_writing_React_components
$ yarnpkg add react react-dom
Source: react-from-scratch-part-3
$ yarnpkg add -D babel-loader @babel/core @babel/preset-react
Avec mise à jour de webpack.config.js
[...] rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, [...]
Source: How_to_set_up_React_webpack_and_Babel_writing_React_components
$ yarnpkg add -D prop-types
Suite à l'erreur 'classProperties' isn't currently enabled il faut installer ce plugin
Source: github.com/.../babel-plugin-proposal-class-properties
Docs: babeljs.io/.../babel-plugin-proposal-class-properties
$ yarnpkg add @babel/plugin-proposal-class-properties --dev
Ajouter le paramétrage dans .babelrc:
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ ["@babel/plugin-proposal-class-properties", { "loose": true } ] ] }
Source: blog.usejournal.com/creating-a-react-app-from-scratch
Docs: github.com/gaearon/react-hot-loader
$ yarnpkg add react-hot-loader
Mise à jour de .babelrc
// .babelrc { "plugins": ["react-hot-loader/babel"] }
Marquer le 'root component'
// App.js import { hot } from 'react-hot-loader/root'; const App = () => <div>Hello World!</div>; export default hot(App);
Permet d'afficher des notification dans une appli React :
Docs: www.npmjs.com/package/react-toastify
Démo visible ici : fkhadra.github.io/react-toastify
$ yarnpkg add react-toastify
Mise à jour de package-json
[...] "react-toastify": "^5.4.0", [...]
Source: html-webpack-plugin
Fichier webpack.config.js à entrée unique :
module.exports = { entry: './src/index.js', [...]
module.exports = { entry: { index: './src/index.js', tecnos: './src/tecnos.js' [...]
Pour nommer les fichiers bundles:
[...] output: { path: path.resolve(__dirname, '..', 'dashboard', 'static-src', 'js', 'react','dist'), filename: '[name].js' }, [...]
[...] plugins: [ new webpack.ProgressPlugin(), new webpack.htmlWebpackPlugin({ title: 'Webpack 4 :)', template: '.src/index.html' }) new webpack.htmlWebpackPlugin({ filename: 'technos.html', template: '.src/technos.html' }) ] }
Source: webpack-bundle-analyzer
Permet de voir si l'on peut factoriser des éléments bundlé plusieurs fois dans des fichiers différents.
$ yarnpkg add -D webpack-bundle-analyzer
[...] const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; [...] plugins: [ new webpack.ProgressPlugin(), new htmlWebpackPlugin({ title: 'Webpack 4 :)', template: '.src/index.html' }) new htmlWebpackPlugin({ filename: 'technos.html', template: '.src/technos.html' }), new BundleAnalyzerPlugin() ] }
Ce plugin permet d'exécuter un shell script, avant ou après le build du bundle.
Source https://www.npmjs.com/package/webpack-shell-plugin
$ yarnpkg add -D webpack-shell-plugin
const WebpackShellPlugin = require('webpack-shell-plugin'); module.exports = { ... ... plugins: [ new WebpackShellPlugin({onBuildStart:['echo "Webpack Start"'], onBuildEnd:['echo "Webpack End"']}) ], ... }