C.3. webpack

8baa6714 · Thomas Fritsch · fa2882a7 · 8baa6714 · 8baa6714 · 8baa6714
Commit 8baa6714 authored 5 years ago by Thomas Fritsch
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 	<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
 	<link rel="stylesheet" type="text/css" href="css/main.css" />
-	<script type="module" src="build/main.js"></script>
+	<script src="build/main.bundle.js" defer></script>
 </head>
 <body>
 	<main id="appContainer">

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel js -d build",
+    "build": "webpack --mode=production",
-    "watch": "babel js -d build --verbose --watch --source-maps"
+	"watch": "webpack --mode=development --watch"
  },
  "author": "thomas.fritsch@univ-lille.fr",
  "license": "ISC",
@@ -15,6 +15,9 @@
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
-    "prettier": "^1.19.1"
+    "babel-loader": "^8.0.6",
+    "prettier": "^1.19.1",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+module.exports = {
+	// Fichier d'entrée :
+	entry: './js/main.js',
+	// Fichier de sortie :
+	output: {
+		path: path.resolve(__dirname, './build'),
+		filename: 'main.bundle.js',
+	},
+	// connexion webpack <-> babel :
+	module: {
+		rules: [
+			{
+				test: /\.js$/, // tous les fichiers js ...
+				exclude: /node_modules/, // ... sauf le dossier node_modules ...
+				use: {
+					// ... seront compilés par babel !
+					loader: 'babel-loader',
+				},
+			},
+		],
+	},
+	devtool: 'source-map',
+};