Javascript ES6
You can also watch the result of all of this on the console
jQuery
sass
png less than 8Kb
svg less than 8Kb
png greater than 12Kb
jpg greater than 1Mb
-> WebPack is a tool that allows you to manage the resources and dependencies of a website.
+> WebPack is a tool that allows you to manage the resources and dependencies of a website.
>
> It mainly solves Javascript dependencies, although it can also work with css, images, Javascript preprocessors, CSS preprocessors, template systems, and much more.
+>
+> Here you'll find a src folder which contains the main files used to create the website and a dist folder with the result of having used Webpack.
## Index
- [Requirements](#requirements)
+- [Getting started](#getting-started)
+- [Approach1: Javascript](#approach-1-using-javascript-with-webpack)
+- [Approach2: Css & Sass](#Approach-2-Using-Sass-with-Webpack)
+- [Approach3: Images](#Approach-3-loading-images-with-webpack)
+- [Approach4: Css & Sass](#Approach-4-Injecting-HTML-with-webpack)
- [Repository](#repository)
- [Technologies used](#technologies-used)
- [Project delivery](#project-delivery)
@@ -25,6 +32,159 @@
- Verify that the output bundle generated by WebPack for the Javascript layer has made the transformation from ECMAScript 6 to ECMAScript 5
- Create a clear and orderly directory structure
+## Getting started
+
+First of all you should install Webpack and Webpack CLI. If you want to have an automatic reload of the result page made with Webpack, you should install the webpack server
+
+Install
+
+```
+npm install webpack webpack-cli # install the CLI
+npm install webpack-dev-server # install the server
+```
+
+## Approach #1: Using Javascript with Webpack
+
+A main.js file that will be your main Javascript file responsible for calling the modules that your application needs.
+
+Inside the webpack.config.js, you must include:
+
+```Javascript
+const path = require("path");
+
+module.exports = {
+ entry: "./src/js/main.js",
+ output: {
+ path: path.resolve(__dirname, "dist"),
+ filename: "index.js",
+ },
+ mode: "production",
+}
+```
+
+A file called module-a.js that contains a javascript module that makes use of the new features of ECMAScript 6.
+
+A file called module-b.js that contains a javascript module that makes use of the JQuery library.
+
+First install jQuery:
+
+```
+npm install jquery
+```
+
+Then, configure webpack to load the jquery plugin:
+
+```Javascript
+const webpack = require("webpack");
+
+module.exports = {
+ ...
+ plugins: [
+ new webpack.ProvidePlugin({
+ $: "jquery",
+ jQuery: "jquery",
+ }),
+ ],
+}
+```
+
+## Approach #2: Using Sass with Webpack
+
+create 3 sass files to style come text:
+
+- colors.scss that applies the css style related to colors.
+- text.scss that applies the css style related to text.
+- main.scss which imports the colors.scss and text.scss files
+
+First, install css and sass loaders:
+
+```
+npm install style-loader css-loader
+npm install sass-loader sass webpack
+```
+
+Now configure the loaders already installed:
+
+```javascript
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+ ...
+ 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",
+ ],
+ },
+ ],
+ },
+};
+```
+
+## Approach #3: loading images with webpack
+
+4 files have been created to load them with Webpack:
+
+1. Png image weighing less than 8kb
+2. Svg with a weight less than 8kb
+3. Png image with a weight greater than 12kb
+4. Image .jpg with a weight greater than 1MB
+
+You should convert image size less than 12kb and compress the rest of PNG, JPG, GIF and SVG images. To achieve that use the webpack configuration below:
+
+```javascript
+ module: {
+ rules: [
+ {
+ test: /\.(png|jpg|svg)$/i,
+ use: [
+ {
+ loader: "url-loader",
+ options: {
+ limit: 12000,
+ },
+ },
+ ],
+ },
+ ],
+ },
+```
+
+Now, you can use import to load the images:
+
+```javascript
+import small from "../img/small.png";
+```
+
+## Approach #4: Injecting HTML with webpack
+
+In this part you should create an index.html file that serves as an entry point to the application. It is necessary that this file automatically includes the assets generated.
+
+Once created, you install the following plugin to convert the index.html file:
+
+```
+npm install html-webpack-plugin
+```
+
+Then execute the npm run build command
+
+```javascript
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+ ...
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "./src/index.html",
+ }),
+ ],
+};
+```
## Repository
@@ -56,6 +216,5 @@ To deliver this project you must follow the steps indicated in the document:
## Resources
-
- [WebPack Official](https://webpack.js.org/)
- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
diff --git a/dist/340f0763e5a8de0e2f0f.png b/dist/340f0763e5a8de0e2f0f.png
new file mode 100644
index 00000000..bcef16d2
Binary files /dev/null and b/dist/340f0763e5a8de0e2f0f.png differ
diff --git a/dist/867fb41654a1e083122d.png b/dist/867fb41654a1e083122d.png
new file mode 100644
index 00000000..4ce8fe03
Binary files /dev/null and b/dist/867fb41654a1e083122d.png differ
diff --git a/dist/ab5a163ff6f4553de69e.jpg b/dist/ab5a163ff6f4553de69e.jpg
new file mode 100644
index 00000000..4a0c72dc
Binary files /dev/null and b/dist/ab5a163ff6f4553de69e.jpg differ
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 00000000..d3a8aee4
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1 @@
+You can also watch the result of all of this on the console
png less than 8Kb
svg less than 8Kb
png greater than 12Kb
jpg greater than 1Mb
You can also watch the result of all of this on the console
png less than 8Kb
svg less than 8Kb
png greater than 12Kb
jpg greater than 1Mb