# webpack 优化篇

cnpm i webpack webpack-cli html-webpack-plugin webpack-dev-server cross-env -D

const path = require("path");
module.exports = {
  mode: "development",
  devtool: "source-map",
  context: process.cwd(),
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

cnpm i friendly-errors-webpack-plugin  node-notifier -D

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const notifier = require("node-notifier");
const ICON = path.join(__dirname, "icon.jpg");
module.exports = {
  mode: "development",
  devtool: "source-map",
  context: process.cwd(),
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin({
      onErrors: (severity, errors) => {
        const error = errors[0];
        notifier.notify({
          title: "Webpack编译失败",
          message: severity + ": " + error.name,
          subtitle: error.file || "",
          icon: ICON,
        });
      },
    }),
  ],
};

cnpm i bootstrap css-loader style-loader -S
const bootstrap =  path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css');
module.exports = smw.wrap({
  mode: "development",
  devtool: 'source-map',
  context: process.cwd(),
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js"
  },
  resolve: {
    extensions: [".js",".jsx",".json"],
    alias:{bootstrap}
  },
  module:{
    rules:[
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
            }
    ]
  }
});

const jQuery = require("jquery");
import jQuery from "jquery";

function loader(source) {
  console.log("logger-loader");
  return source;
}
module.exports = loader;

let title = require("./title");
console.log(title);

let name = require("./name");
module.exports = `hello ${name}`;

module.exports = "james";

import moment from "moment";
console.log(moment);

import "./index.css";

function func1() {
  return "func1";
}
function func2() {
  return "func2";
}
export { func1, func2 };
import { func2 } from "./functions";
const result2 = func2();
console.log(result2);

if (false) {
  console.log("false");
}

import { func2 } from "./functions";
func2();

var aabbcc = "aabbcc";
aabbcc = "eeffgg";

export default "Hello";

import str from "./hello.js";
console.log(str);

entry: {
  index: "./src/index.js",
  login: "./src/login.js"
}

module.exports = "hello";

document.querySelector("#clickBtn").addEventListener("click", () => {
  import("./hello").then((result) => {
    console.log(result.default);
  });
});

document.querySelector("#clickBtn").addEventListener("click", () => {
  import(
    /* webpackChunkName: 'hello', webpackPrefetch: true */ "./hello"
  ).then((result) => {
    console.log(result.default);
  });
});

module.exports = {
  output: {
    filename: "[name].js",
    chunkFilename: "[name].js",
  },
  entry: {
    page1: "./src/page1.js",
    page2: "./src/page2.js",
    page3: "./src/page3.js",
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 10,
      automaticNameDelimiter: "~",
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

import utils1 from "./module1";
import utils2 from "./module2";
import $ from "jquery";
console.log(utils1, utils2, $);
import(/* webpackChunkName: "asyncModule1" */ "./asyncModule1");

import utils1 from "./module1";
import utils2 from "./module2";
import $ from "jquery";
console.log(utils1, utils2, $);

import utils1 from "./module1";
import utils3 from "./module3";
import $ from "jquery";
console.log(utils1, utils3, $);

console.log("module1");

console.log("module2");

console.log("module3");

import _ from 'lodash';
console.log(_);
                             Asset       Size                     Chunks             Chunk Names
             asyncModule1.chunk.js  740 bytes               asyncModule1  [emitted]  asyncModule1
                        index.html  498 bytes                             [emitted]
                          page1.js   10.6 KiB                      page1  [emitted]  page1
              page1~page2.chunk.js  302 bytes                page1~page2  [emitted]  page1~page2
        page1~page2~page3.chunk.js  308 bytes          page1~page2~page3  [emitted]  page1~page2~page3
                          page2.js   7.52 KiB                      page2  [emitted]  page2
                          page3.js   7.72 KiB                      page3  [emitted]  page3
     vendors~asyncModule1.chunk.js    532 KiB       vendors~asyncModule1  [emitted]  vendors~asyncModule1
vendors~page1~page2~page3.chunk.js    282 KiB  vendors~page1~page2~page3  [emitted]  vendors~page1~page2~page3
Entrypoint page1 = vendors~page1~page2~page3.chunk.js page1~page2~page3.chunk.js page1~page2.chunk.js page1.js
Entrypoint page2 = vendors~page1~page2~page3.chunk.js page1~page2~page3.chunk.js page1~page2.chunk.js page2.js
Entrypoint page3 = vendors~page1~page2~page3.chunk.js page1~page2~page3.chunk.js page3.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UploadPlugin = require("./plugins/UploadPlugin");
const glob = require("glob");
const PATHS = {
    src: path.join(__dirname, "src"),
};
module.exports = {
  mode: "development",
  devtool: false,
  context: process.cwd(),
  entry: {
    main: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
    chunkFilename: "[name].[hash].chunk.js",
    publicPath: "http://img.golderbrother.cn/",
  },
  optimization: {
    minimize: true,
    minimizer: [
      //压缩JS
      /* new TerserPlugin({
        sourceMap: false,
        extractComments: false,
      }),
      //压缩CSS
      new OptimizeCSSAssetsPlugin({}), */
    ],
    //自动分割第三方模块和公共模块
    splitChunks: {
      chunks: "all", //默认作用于异步chunk，值为all/initial/async
      minSize: 0, //默认值是30kb,代码块的最小尺寸
      minChunks: 1, //被多少模块共享,在分割之前模块的被引用次数
      maxAsyncRequests: 2, //限制异步模块内部的并行最大请求数的，说白了你可以理解为是每个import()它里面的最大并行请求数量
      maxInitialRequests: 4, //限制入口的拆分数量
      name: true, //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔开，如vendor~
      automaticNameDelimiter: "~", //默认webpack将会使用入口名和代码块的名称生成命名,比如 'vendors~main.js'
      cacheGroups: {
        //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
        vendors: {
          chunks: "all",
          test: /node_modules/, //条件
          priority: -10, ///优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中,为了能够让自定义缓存组有更高的优先级(默认0),默认缓存组的priority属性为负值.
        },
        commons: {
          chunks: "all",
          minSize: 0, //最小提取字节数
          minChunks: 2, //最少被几个chunk引用
          priority: -20,
          reuseExistingChunk: true, //如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
        },
      },
    },
    //为了长期缓存保持运行时代码块是单独的文件
    /*  runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    }, */
  },
  module: {
    rules: [
      {
        test: /\.js/,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                ["@babel/preset-env", { modules: false }],
                "@babel/preset-react",
              ],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            // 有各种配置，可以调整你要压缩后图片的质量
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: "65-90",
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
    new UploadPlugin({}),
  ],
  devServer: {},
};

cnpm i cross-env dotenv terser-webpack-plugin optimize-css-assets-webpack-plugin -D

console.log(process.env.NODE_ENV); // development | production

console.log("NODE_ENV", process.env.NODE_ENV); // undefined

console.log(process.env.NODE_ENV); // undefined

console.log('NODE_ENV',process.env.NODE_ENV);// undefined
const TerserWebpackPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env) => {
  console.log('env',env);// {development:true} | {production:true}
  return {
+        optimization: {
+          minimize:env&&env.production,
+          minimizer: (env && env.production) ? [
+            new TerserWebpackPlugin({
+              parallel: true//开启多进程并行压缩
+            }),
+            new OptimizeCssAssetsWebpackPlugin({})
+          ] : []
+        },
  }
};

console.log("process.env.NODE_ENV", process.env.NODE_ENV); // undefined
console.log("NODE_ENV", NODE_ENV); // error ！！！
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"), //注意用双引号引起来，否则就成变量了
      NODE_ENV: JSON.stringify("production"),
    }),
  ],
};

console.log(NODE_ENV); //  production

export default function logger(...args) {
  if (process.env.NODE_ENV == "development") {
    console.log.apply(console, args);
  }
}

console.log("process.env.NODE_ENV", process.env.NODE_ENV); // development

NODE_ENV = development;

cnpm i @babel/core @babel/cli -D

const sum = (a, b) => a + b;
console.log(sum(1, 2));

module.exports = function () {
  return { plugins: ["pluginA", "pluginB", "pluginC"] };
};

cnpm install --save-dev @babel/preset-env

//.browserslistrc
> 0.25%
not dead
last 2 Chrome versions
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
                ["@babel/preset-env",
                {
                  useBuiltIns:'usage',
                  corejs:2,
+                 targets: "> 0.25%, not dead",
                }]
           ]
          },
        },
      },

import "@babel/polyfill";
console.log(Array.isArray([]));
let p = new Promise();

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: false,
                },
              ],
            ],
          },
        },
      },
    ],
  },
  plugins: [],
};

  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
                ["@babel/preset-env",
                {
+                  useBuiltIns:'entry',
+                  corejs:2,
                  targets: "> 0.25%, not dead",
                }]
           ]
          },
        },
      },
    ]
  },

import "@babel/polyfill";
console.log(Array.isArray([]));
let p = new Promise((resolve) => resolve("ok"));
p.then((result) => console.log(result));

import 'core-js/stable';
import 'regenerator-runtime/runtime'
console.log(Array.isArray([]));
let p = new Promise(resolve=>resolve('ok'));
p.then(result=>console.log(result));

console.log(Array.isArray([]));
let p = new Promise((resolve) => resolve("ok"));
p.then((result) => console.log(result));
async function fn() {}

"use strict";

require("core-js/stable");

require("regenerator-runtime/runtime");

console.log(Array.isArray([]));
let p = new Promise((resolve) => resolve("ok"));
p.then((result) => console.log(result));
async function d() {}

cnpm i babel-runtime -D

import Promise from "babel-runtime/core-js/promise";
const p = new Promise((resolve) => {
  resolve("ok");
});
console.log(p);

"use strict";

var _promise = _interopRequireDefault(
  require("babel-runtime/core-js/promise")
);
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
const p = new _promise.default((resolve) => {
  resolve("ok");
});
console.log(p);

      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [["@babel/preset-env",{
              targets: "> 0.25%, not dead",
            }], '@babel/preset-react'],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  corejs: 2,//当我们使用 ES6 的静态事件或内置对象时自动引入 babel-runtime/core-js
                  helpers: true,//移除内联babel helpers并替换使用babel-runtime/helpers 来替换
                  regenerator: true,//是否开启generator函数转换成使用regenerator runtime来避免污染全局域
                },
              ],
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              ['@babel/plugin-proposal-class-properties', { loose: true }],
            ],
          },
        },
      },

//corejs
const p = new Promise(() => {});
console.log(p);

//helpers
class A {}
class B extends A {}
console.log(new B());
//regenerator
function* gen() {}
console.log(gen());

let preset1 = { plugins: ["plugin5", "plugin6"] }
let preset2 = { plugins: ["plugin3", "plugin4"] }
{
  "presets": ["preset1","preset"],
  "plugins":['plugin1','plugin2']
}
plugin1 plugin2 plugin3 plugin4 plugin5 plugin6

module.exports = {
  devtool: "source-map",
  devtool: "eval-source-map",
  devtool: "cheap-module-eval-source-map",
  devtool: "cheap-eval-source-map",
  devtool: "eval",
  devtool: "cheap-source-map",
  devtool: "cheap-module-source-map",
};

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  devtool: false,
  entry: './src/index.js',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        options: { fix: true },
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env',
              {
                useBuiltIns: 'usage', // 按需要加载polyfill
                corejs: {
                  version: 3, // 指定core-js版本
                },
                targets: { // 指定要兼容到哪些版本的浏览器
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                },
              },
            ], '@babel/preset-react'],
            plugins: [
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              ['@babel/plugin-proposal-class-properties', { loose: true }],
            ],
          },
        },
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
      },
      { test: /\.txt$/, use: 'raw-loader' },
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },
      { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] },
      { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] },
      {
        test: /\.(jpg|png|bmp|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            esModule: false,
            name: '[hash:10].[ext]',
            limit: 8 * 1024,
            outputPath: 'images',
            publicPath: '/images',
          },
        }],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
+    new webpack.SourceMapDevToolPlugin({
+      append: '\n//# sourceMappingURL=http://127.0.0.1:8081/[url]',
+      filename: '[file].map',
+    }),
+    new FileManagerPlugin({
+      events: {
+        onEnd: {
+          copy: [{
+            source: './dist/*.map',
+            destination: 'xxx',
+          }],
+          delete: ['./dist/*.map'],
+        },
+      },
+    }),
  ],
};

function createHash() {
  return require("crypto").createHash("md5");
}
let entry = {
  entry1: "entry1",
  entry2: "entry2",
};
let entry1 = "require depModule1"; //模块entry1
let entry2 = "require depModule2"; //模块entry2

let depModule1 = "depModule1"; //模块depModule1
let depModule2 = "depModule2"; //模块depModule2
//如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效
let hash = createHash()
  .update(entry1)
  .update(entry2)
  .update(depModule1)
  .update(depModule2)
  .digest("hex");
console.log("hash", hash);
//chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。
//在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响
let entry1ChunkHash = createHash()
  .update(entry1)
  .update(depModule1)
  .digest("hex");
console.log("entry1ChunkHash", entry1ChunkHash);

let entry2ChunkHash = createHash()
  .update(entry2)
  .update(depModule2)
  .digest("hex");
console.log("entry2ChunkHash", entry2ChunkHash);

let entry1File = entry1 + depModule1;
let entry1ContentHash = createHash().update(entry1File).digest("hex");
console.log("entry1ContentHash", entry1ContentHash);

let entry2File = entry2 + depModule2;
let entry2ContentHash = createHash().update(entry2File).digest("hex");
console.log("entry2ContentHash", entry2ContentHash);

module.exports = {
  entry: {
    main: './src/index.js',
    vender:['lodash']
  },
  output:{
     path:path.resolve(__dirname,'dist'),
    filename:'[name].[hash].js'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash].css"
    })
  ]
};