Differences

This shows you the differences between two versions of the page.

--- ixc2024:tech:tools:webpack [2024/05/22 12:05] – created alesta
+++ ixc2024:tech:tools:webpack [2024/08/26 05:10] (current) – salsabeel-tn
@@ Line 1: / Line 1: @@
-.
+\\
+link: https://webpack.js.org/
+\\
+Green Aspect:
+Caching: Proper caching strategies ensure that users don’t have to re-download unchanged assets. This reduces the load on servers and the amount of data transferred, which in turn lowers energy consumption.
+How to Implement:
+Use content hashing to create unique filenames for your assets, which helps in long-term caching.
+Example:
+''
+module.exports = {
+  output: {
+    filename: '[name].[contenthash].js',
+    path: path.resolve(__dirname, 'dist')
+  },
+};
+''
+\\
+Using HtmlWebpackPlugin to clean the code structure:
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+      },
+    }),
+  ],
+  // other configurations...
+};
+\\
+Green Development Practices
+Development Server: Use Webpack’s development server efficiently to avoid unnecessary resource usage.
+How to Implement:
+Configure the development server to use minimal resources.
+Example:
+module.exports = {
+  devServer: {
+    contentBase: './dist',
+    compress: true,
+    port: 9000
+  },
+  // other configurations...
+};