-
-
-
+d) Creating index.html.
-## Technologies used
+e) Importing all of them into our entry point main.js
-\* HTML
+```
+// main.js
+import "./index.html";
+import "jquery";
+import "./module-a.js";
+import "./module-b.js";
+import "./main.scss";
+```
-\* CSS
+## 5. Initializing our webpack.config.js
-\* JS
+```
-\* SASS
+module.exports = {
+ mode: "development",
+ entry: "./src/app/main.js",
+ output: {
+ path: path.resolve(__dirname, "dist"),
+ filename: "bundle.js",
+ },
+};
+```
-\* webpack
+## 6. Installing HtmlWebpackPlugin and jQuery
-\* ES6
+Installing HtmlWebpackPlugin and adding it as plugin on our webpack.config.js
-## Project delivery
+```
+npm install --save-dev html-webpack-plugin
+```
-To deliver this project you must follow the steps indicated in the document:
+```
+// webpack.config.js
+ plugins: [
+ new webpack.ProvidePlugin({
+ $: "jquery",
+ jQuery: "jquery",
+ }),
+ new HtmlWebpackPlugin({
+ template: "./src/public/index.html",
+ }),
+ ]
+```
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+## 7. Installing SASS loader
-## Resources
+```
+npm install sass-loader sass webpack --save-dev
+```
+```
+// webpack.config.js
+ module: {
+ rules: [
+ {
+ 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",
+ ],
+ },
+ ],
+ },
+```
-- [WebPack Official](https://webpack.js.org/)
-- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+## 8. Compiling our webpack and checking results
+
+```
+npm run build
+```
+
+Then, we get a new folder called "dist", which contain our ouput bundle.js and index.html, opening index.html we should be able to see our modifications by JS and SASS.
+
+## 9. Managing images with webpack
+
+### 9.1 Importing images into our entry point
+
+```
+// main.js
+import "./pngsmall.png";
+import "./svgsmall.svg";
+import "./pngbig.png";
+import "./jpgbig.jpg";
+```
+
+```
+// index.html
+
+ 
+ 
+ 
+Color modified by SASS
\\r\\nFont weigth modified by SASS
\\r\\n