20230418----重返学习-模块化开发-webpack打包

已于 2023-06-14 00:07:20 修改
阅读量443 收藏
点赞数
分类专栏： 重返学习 文章标签： webpack 学习 javascript
于 2023-04-18 23:57:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/130233960
版权
本文介绍了模块化开发的概念，包括单例模式、AMD和CMD的区别以及ES6的Module规范。接着详细讲解了Webpack的安装、配置和打包过程，包括如何配置开发服务器实现热更新和代理，以及使用CleanWebpackPlugin清除旧文件。此外，还提到了不同环境的配置和脚本命令的使用。
摘要由CSDN通过智能技术生成

day-052-fifty-two-20230418-模块化开发-webpack打包

模块化开发

  • 用于确保文件引入的顺序

单例设计模式

  • 单例设计模式：如果有多个模块，模块之间存在依赖关系，那我们在html中导入js的时候，我们需要注意模块之间的依赖关系【模块依赖关系越复杂，就会变得很恶心】

    • 例子

      • ./index.html

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>11111</h1>
  <script src="./ModelA.js"></script>
  <script src="./ModelB.js"></script>
  <script src="./index.js"></script>
</body>
</html>

      • ./ModelA.js

        let ModelA = (() => {
  //求和
  const sum = function sum(...args) {
    return args.reduce((res, item) => res + item, 0);
  };
  return {
    sum,
  };
})();

      • ./ModelB.js

        let ModelB = (() => {
  //求平均值
  const average = function average(...args) {
    let sum = ModelA.sum(...args);
    return sum / args.length;
  };
  return {
    average,
  };
})();

      • ./index.js

        // console.log(`ModelA-->`, ModelA);
console.log(`ModelA.sum(1,2,3,4,5,6,7)-->`, ModelA.sum(1, 2, 3, 4, 5, 6, 7));
console.log(`ModelB.average(1,2,3,4,5,6,7)-->`, ModelB.average(1, 2, 3, 4, 5, 6, 7));

    • 优点

      • 兼容性好
      • 依赖关系简单

  • 普通的script标签导入关系，只适合做简单的依赖关系，复杂的如相互循环关系不行

    A B C
B依赖A
C依赖B和A

      <script src="./ModelA.js"></script>
  <script src="./ModelB.js"></script>
  <script src="./index.js"></script>

    • 如：

      A B C D
B依赖A和C
C依赖A和D
D依赖B和C

AMD(require.js)

AMD是依赖于require.js的写法，不过目前2023年差不多被淘汰了。

  • AMD思想，是在单例模式的基础上，实现了依赖的管控【管控模式：依赖前置 在具体开发模块代码之前，把所有需要的依赖先处理好，再去开发】

    • 依赖于其它模块并导出当前模块

      define(['A', 'B'], function (A, B) {
  'use strict';
  return {
    
  }
});

  • grunt、glup、fis都是基于AMD思想开发的

  • 例子：

  • ./index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>AMD</h1>
  <script src="./require.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>

  • ./ModelA.js

    //导出文件--模块A不依赖于其它模块
define(function (require, factory) {
  "use strict";
  return {
    sum(...args) {
      return args.reduce((res, item) => res + item, 0);
    },
  };
});

  • ./ModelB.js

    //导出文件--模块B依赖于模块A
define(["ModelA"], function (ModelA) {
  return {
    average(...args) {
      let sum = ModelA.sum(...args);
      return sum / args.length;
    },
  };
});

  • ./index.js

    //导入文件，依赖于模块A与模块B
require(["ModelA", "ModelB"], function (ModelA, ModelB) {
  console.log(`ModelA-->`, ModelA);
  console.log(`ModelA.sum(1,2,3,4,5)-->`, ModelA.sum(1, 2, 3, 4, 5));
  console.log(`ModelB.average(1,2,3,4,5)-->`, ModelB.average(1, 2, 3, 4, 5));
});

CMD

  • CMD解决了前置依赖的问题CommonJS(后台–nodejs)/sea.js(前端)
  • nodejs --> 前端的JavaScript
    • 基本上支持所有的JavaScript的语法
    • 命令提示符(黑框) --> node XXX.js
  • node写法

    • ./ModelA.js

      //导出 单个值
module.exports = function sum(...args) {
  return args.reduce((res, item) => res + item, 0);
};

    • ./ModelB.js

      let sum = require("./ModelA");

function average(...args) {
  let res = sum(...args);
  return res / args.length;
}
let num = 100;

//导出，导出多个内容
module.exports = {
  average,
  num,
};

    • ./index.js

      // console.log(`111-->`, 111);

let path = require("path"); //node.js自身的模块
//导入，可以省略`.js`后缀，不能省略`./`(自己创建的模块)；不加`./`，默认是node.js自己的模块。
// 导入单个内容
let sum = require("./ModelA");
console.log(`sum-->`, sum);//sum--> [Function: sum]
console.log(`sum(1,2,3,4,5)-->`, sum(1, 2, 3, 4, 5));//sum(1,2,3,4,5)--> 15

// 导入多个内容
// let ModelB=require('./ModelB')
// console.log(`ModelB-->`, ModelB);

// 导入多个内容，可以使用解构赋值
let { average, num } = require("./ModelB");
console.log(`average(1,2,3,4,5)-->`, average(1, 2, 3, 4, 5));//average(1,2,3,4,5)--> 3
console.log(`num-->`, num);//num--> 100

    • 要用node.js中的node xxx命令来执行，这里在index.js所在目录中使用node index.js来调用。

ES6中的Module

  1. 在script标签中设置type=“module”，可以直接在浏览器端开启ES6Module规范，并且需要保证页面是基于HTTP/HTTPS协议预览–即本地开发要使用类似于Live Server的本地服务器

    <script type="module" src="main.js"></script>

  2. ES6Module规范

    1. 模块中只想导出一次,直接基于 export default 导出即可

      • 导出：

        export default sum; 
export default {sum:sum};

      • 导入：

        import sum from './A';

        import A from './A';  //=> A.sum();

      • 不能直接给A解构赋值import {sum} from './A';这样报语法错误

    2. 模块中想导出多次，导出多个方法(或者变量)给外面用 export

      • 导出：export {sum}; 直接导出对象是不支持的，或者obj={}，我们export obj这样也不支持，像这样做需要使用 export default 处理

        export let num = 10;
export function fn() {};

      • 导入：import A from './A'; 这样写也是不行的，这种方式只支持 export default

        import {num,fn} from './A';
import * as C from './C.js';   => C.fn();

    3. 原理：浏览器底层机制，ES6中模块导出是按照导出一个对象处理的

      • 基于export导出的时候，浏览器底层机制，是按照导出一个对象处理的，每一次调用，都是设置为一个键值对。
        • import {num,fn} from './A'，导出语句如果遇到了花括号，后面导出的值就是导出对象。
        • import * as ModelA from './A'，导出语句如果遇到了*号，后面导出的值就是导出对象，as表示设置别名。
      • 基于export default导出的东西，是赋值给导出对象的default属性的。
        • import ModelA from './A'，导出语句如果没遇到花括号，后面导出的值就是导出对象.default。
     {
    // 基于 export 导出的内容，直接设置为键值对 
    num:10,
    fn(){},
    
    // 基于 export default 导出的东西，是赋值给对象的default属性的
    default:xxx
 }
    • 所以，当我们基于import的时候，如果后面是一个花括号的形式，就意为解构赋值，就是对整个模块进行解构。而如果是一个对象时，就意为接收了模块.default这个属性。

      1. 为啥 export default 导出的不能直接结构赋值？

        • 因为它导出的内容，在对象的default属性中，我们需要先拿到default属性的值，才能解构处理…

          import A from './A';  //->  会默认让 A=`对象.default `
let {sum} = A;

      2. 为啥 export 导出的可以解构赋值？

        • 因为它是直接把内容付给对象的键值对，导入的时候直接解构即可…

      3. import * as X from ‘./A’; 此时它会把导出的对象赋值给X

  • 例子：

    • ./index.html

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ES6 Module</h1>
  <script type="module" src="./index.js"></script>
</body>
</html>

    • ./index.js

      //不可以省略后缀.js
// import ModelA from "./ModelA.js";
// console.log(`ModelA-->`, ModelA);

//注意 `export default`导出的不能直接解构赋值，但可以用一个变量A接收之后再另起一行对变量A进行解构。
//是因为底层对`export default`导出的东西放在`{default:{}}`中的`default属性`里了。
// import {sum,num} from "./ModelA.js";
// console.log(`num-->`, num);


import {default as theDefault} from "./ModelA.js"
console.log(`theDefault-->`, theDefault);
// import {'default':{sum,num}} from "./ModelA.js"//default是关键字，会报错
// console.log(`theDefault-->`, theDefault);

// import ModelA from "./ModelA.js";
// console.log(`ModelA-->`, ModelA);
// let { sum, num } = ModelA;
// console.log(`num-->`, num);

import { average } from "./ModelB.js";
console.log(`average-->`, average);

// import { a, b, c } from "./ModelC.js";
// console.log(`a, b, c-->`, a, b, c);

//*表示导入全部，as表示起个别名
import * as ModelC from "./ModelC.js";//代码运行的时候，import会自动提升到顶部，所以随意写位置都可以。
console.log(`ModelC.a, ModelC.b, ModelC.c-->`, ModelC.a, ModelC.b, ModelC.c);

    • ./ModelA.js

      //单个导出---一个js文件可以出现多次
// export

// 多个导出--一个js文件只能出现一次
// export default

const sum = function sum(...args) {
  return args.reduce((res, item) => res + item, 0);
};
let num = 100;
export default {
  sum,
  num,
};

    • ./ModelB.js

      import ModelA from "./ModelA.js";

export function average(...args) {
  let sum = modelA.sum(...args);
  return sum / args.length;
}

    • ./ModelC.js

      export const a = 100;
export const b = 200;
export const c = 300;

// 可以声明变量，值为对象
export const obj = {
  n: 100,
  m: 200,
};

// export不能直接导出对象
// export {
//   nn:100,
//   mm:200
// }
// 能直接导出对象的是`export default`
export default {
  nn: 100,
  mm: 200,
};
// `export default`可以与`export`共存，但不能出现多次，即整个js文件中只能出现一次`export default`。

webpack打包

  1. 安装webpack

    1. 本地安装

      npm i webpack@5.49.0 webpack-cli@4.7.2

      • 好处：不同的文件夹可以安装不同的版本，一般就本地安装

      • 本地安装之后使用的方法

        • *方法1：

          1. 找到 package.json —> “scripts” 配置脚本命令

            • 名称可以自定义
            {
  "scripts": {
    "自定义脚本命令":"webpack"
  }
}

          2. 在对应目录中执行配置的脚本命令

            npm run 自定义脚本命令
// npm run serve//如果package.json中的"scripts"配置的scripts下的属性名称为serve

        • *方法2：

          1. 在对应目录中执行配置的脚本命令npx webpack （webpack5版本及以上）

            npx webpack

      • 默认打包的js是src目录下index.js为入口文件----》dist文件夹main.js为打包后的出口文件

    2. 全局安装

      npm i webpack@5.49.0 webpack-cli@4.7.2 -g    //安装
npm uni webpack@5.49.0 webpack-cli@4.7.2 -g  //删除

      • 缺点：只能安装某一个版本

      • 全局安装之后可以在全局环境中的命令终端中使用命令 webpack

        webpack    //webpack执行
    • webpack一般要高一个版本,webpack-cli一般要低一个版本。如果相同版本，一般会报兼容性错误。

  2. 使用webpack

    • 本地安装之后使用的方法

      • *方法1：

        1. 找到 package.json —> “scripts” 配置脚本命令

          • 名称可以自定义
          {
  "scripts": {
    "自定义脚本命令":"webpack"
  }
}

        2. 在对应目录中执行配置的脚本命令

          npm run 自定义脚本命令
// npm run serve//如果package.json中的"scripts"配置的scripts下的属性名称为serve

      • *方法2：

        1. 在对应目录中执行配置的脚本命令npx webpack （webpack5版本及以上）

          npx webpack

    • 默认打包的js是src目录下index.js为入口文件----》dist文件夹main.js为打包后的出口文件

    • webpack 支持默认配置打包：不需要自己写配置项，它默认有自己的配置项，当我们执行 webpack 的时候，会按照默认配置项打包

      • 找到当前项目目录中的 src文件夹，找到文件夹中的index.js文件，作为入口，按照入口文件夹中的代码和模块依赖，最后进行打包，打包后的文件，放在dist目录中

  3. 自定义webpack打包的规则

    • 自己配置webpack的配置文件。如设置入口与出口

      1. 在根目录中新建 webpack.config.js

        • 当我们执行webpack命令的时候，首先检测有没有这个文件。

          • 有，就按照这个文件提供的规则进行打包编译；
          • 没有，就按照默认的规则进行打包编译。

        • 简单的配置项示例

          const path = require("path"); //node.js的路径模块

module.exports = {
  entry: "./src/index.js", //入口文件路径

  //出口相关配置
  output: {
    filename: "index.js", //文件名称
    path: path.resolve(__dirname, "dist"), //在当前项目的根目录下，创建一个dist文件夹。
  },

  mode: "development", //development 开发环境-文件不会压缩，production 生产环境-会压缩
};
          • 实际意思，该文件是一个js文件，以node.js的方式来执行。通过module.exports抛出一个表示webpack配置对象的对象。

            • 由于是node.js的文件，故而可以引入node.js的一些插件及组件，来根据不同情况做不同处理。

              const path = require("path"); //node.js的路径模块
let outputPath = path.resolve(__dirname, "dist"); //在当前项目的根目录下，创建一个dist文件夹。
console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

// 这个导出的对象，就是webpack的配置；
module.exports = {
  entry: "./src/index.js", //入口文件路径

  //出口相关配置
  output: {
    filename: "index.js", //文件名称
    path: outputPath, //输出文件的目录
  },

  mode: "production", //development开发环境-文件不会压缩，production生产环境-会压缩
};

    • 不同环境的配置

      • 执行不同的脚本命名做不同的打包，分成开发环境和生产环境
        • 方法1 做多个不同的配置执行文件，每一个配置文件对应不同的环境

          1. 在根目录制定做多个不同的配置执行文件，每一个配置文件对应不同的环境

            • webpack.config.development.js

              const path = require("path");
let outputPath = path.resolve(__dirname, "dist");
console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

module.exports = {
  entry: "./src/index.js",

  output: {
    filename: "index.[hash].js",
    path: outputPath,
  },

  mode: "development", //development开发环境-文件不会压缩，production生产环境-会压缩
};

            • webpack.config.production.js

              const path = require("path");
let outputPath = path.resolve(__dirname, "dist");
console.log(`打包完成后输出的目录：outputPath-->`, outputPath);
module.exports = {
  entry: "./src/index.js",

  output: {
    filename: "index.[hash].min.js",
    path: outputPath,
  },

  mode: "production", //生产环境-会压缩
};

            • 这个是公司常用的，一个配置对应一个环境，更简洁。逻辑更好理解。

          2. 在package.json中的"scripts"定义的不同执行命令中，使用webpack --config来指定webpack的配置执行文件。

        • 方法2 ：相同的配置文件，只不过根据环境变量不同，做一些不同的配置而已。
          • 使用cross-env，拿到cross-env命令执行时配置的NODE_ENV属性的值，根据NODE_ENV属性的值，对同一个配置文件进行处理。

            1. 安装cross-env

              npm i cross-env --save-dev

            2. 在package.json中的"scripts"定义的不同执行命令中，使用cross-env NODE_ENV=xxxx来指定NODE_ENV的值。

              {
  "scripts": {
    "开发": "cross-env NODE_ENV=development webpack",
    "D": "cross-env NODE_ENV=development webpack",
    "生产": "cross-env NODE_ENV=production webpack",
    "P": "cross-env NODE_ENV=production webpack",
  },
}

            3. 在webpack.config.js中通过process.env.NODE_ENV拿到使用cross-env脚本执行时设置的NODE_ENV的值，并根据它对module.exports要返回出去的对象的值进行处理。

              const path = require("path"); //node.js的路径模块
let outputPath = path.resolve(__dirname, "dist"); //在当前项目的根目录下，创建一个dist文件夹。
// console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

let NODE_ENV = process.env.NODE_ENV || `production`;
const theMode = NODE_ENV;
let outputFilename = `production.js`;
console.log(`NODE_ENV-->`, NODE_ENV);
console.log(`process.env.NODE_ENV-->`, process.env.NODE_ENV);

if (NODE_ENV === `development`) {
  outputFilename = `development.js`;
}

// 这个导出的对象，就是webpack的配置；
module.exports = {
  entry: "./src/index.js", //入口文件路径

  //出口相关配置
  output: {
    filename: outputFilename, //文件名称
    path: outputPath, //输出文件的目录
  },

  mode: theMode, //development开发环境-文件不会压缩，production生产环境-会压缩
};

            4. 命令终端窗口打开调用package.json中脚本命令

              npm run D

  4. 生成html文件

    • 打包压缩出现html文件，将js放到html文件里。

    1. 安装html-webpack-plugin插件，用于在webpack中可以生成一个html文件。

      npm i html-webpack-plugin -–save-dev

    2. 在webpack.config.js中插入该插件。

      // 1. 导入插件
let HtmlWebpackPlugin = require("html-webpack-plugin");
// const theHtmlWebpackPlugin = new HtmlWebpackPlugin();//默认的配置文件。
const theHtmlWebpackPlugin = new HtmlWebpackPlugin({
  template: "./public/index.html", //指定自己的html文件
  filename: "index.html", //生成的html的文件名称
  hash: true, //给引入的文添加hash值
  minify: {
    collapseWhitespace: true, //去掉html内容空格
    removeComments: true, //去掉注释
    removeAttributeQuotes: true, //去掉属性的引号
    removeEmptyAttributes: true, //属性值为空的去掉
  },
});
const pluginsList = [];
pluginsList.push(theHtmlWebpackPlugin);

module.exports = {
  plugins: pluginsList, //2. 使用插件，是一个数组。
}

    3. 在package.json中scripts脚本中配置webpack命令

      {
  "scripts": {
    "build": "webpack --config webpack.config.js",//这个是打包命令，在出口文件目录产生文件
    "自定义脚本命令": "webpack",//这个是打包命令，在出口文件目录产生文件
    "fang": "webpack server"//这个是调用本地服务器，不会在出口文件目录产生文件
  },
}

    4. 命令终端窗口打开调用package.json中脚本命令

      npm run build

  5. 配置开发服务器

    • 实现热更新，浏览器自动打开，并且可以使用webpack的代理服务器

    1. 安装热更新插件

      npm install webpack-dev-server –save-dev

    2. 在webpack.config.js中配置代理服务器插件。

        module.exports = {
    //配置dev-server相关的配置
    devServer: {
      port: "8569", //端口号
      host: "127.0.0.1", //域名
      //compress:true,//是否开启服务器端压缩
      //progress:true,//是否查看编译进度

      //打开页面的路径，访问的资源路径
      static: {
        directory: staticDirectory, //要打开页面的路径。
      },
      hot: true, // 是否热更新
      open: true, // 是否自动打开页面

      // 配置跨域代理服务器
      proxy: {
        //代理路径1，就尽量使用这一种。表示如果fetch("/proxy/jianshu/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
        "/proxy/jianshu/": {
          target: "https://www.jianshu.com",
          pathRewrite: { "^/proxy/jianshu/": "/" }, //路径重写。替换url，缩短原的旧标识
          changeOrigin: true, //是否伪装访问源
          
        },
        //代理路径2，可以写多个。表示如果fetch("/fang/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
        "/fang/": {
          target: "https://www.jianshu.com",
          pathRewrite: { "^/fang/": "/" }, //路径重写。替换url，缩短原的旧标识
          changeOrigin: true, //是否伪装访问源
        },
        //代理路径3，不建议使用根路径。表示如果fetch("/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
        "/": {
          target: "https://www.jianshu.com",
          pathRewrite: { "^/": "/" }, //路径重写。替换url，缩短原的旧标识
          changeOrigin: true, //是否伪装访问源
        },
      },
    },
  };

    3. 在package.json中scripts脚本中配置webpack命令

      {
  "scripts": {
    "自定义脚本命令": "webpack --config webpack.config.production.js",
    "fang": "webpack server",

    "build": "webpack",//这个是打包命令，在出口文件目录产生文件
    "serve": "webpack server",//这个是调用本地服务器，不会在出口文件目录产生文件，不会清除上次的出口文件


    "server": "webpack server"
  },
}

    4. 命令终端窗口打开调用package.json中脚本命令

        npm run serve//开发环境，不会打包出结果，可以热更新
  //npm run build//生产环境，会有打包结果
      • 可以实现的效果：
        • 开发环境: 当前服务一直没有结束，当我们代码改变的时候，会自动重新编译，自动刷新浏览器，看最新的效果
        • 生产环境：一直开发，等到功能效果都实现后，我们需要整体打包编译部署到服务器上，【最后把dist文件（打包后的文件），部署到服务器上即可】
      • 原因：
        • 经过之前的配置后，package.json中scripts脚本中webpack server命令是打开一个本地服务器，当我们代码改变的时候，会自动重新编译，自动刷新浏览器，看最新的效果。
        • 经过之前的配置后，package.json中scripts脚本中单纯的webpack命令是把当前的文件打包到配置的出口文件目录上，以便后面部署到服务器上。

  6. 清除旧文件

    1. 安装clean-webpack-plugin插件

      npm i clean-webpack-plugin –save-dev

    2. 在webpack.config.js中插入该插件。

      const pluginsList = [];

//"clean-webpack-plugin"用于清除之前打包后文件，再打包新的文件。
// 1. 导入插件
let { CleanWebpackPlugin } = require("clean-webpack-plugin");
const theCleanWebpackPlugin = new CleanWebpackPlugin();
pluginsList.push(theCleanWebpackPlugin);

module.exports = {
  plugins: pluginsList, //2. 使用插件，是一个数组。
}

    3. 在package.json中scripts脚本中配置webpack命令

      {
  "scripts": {
    "build": "webpack --config webpack.config.production.js",//这个是打包命令，在出口文件目录产生文件，配置好了clean-webpack-plugin后会清除上次的出口文件
    "D": "cross-env NODE_ENV=development webpack",//这个是打包命令，在出口文件目录产生文件，配置好了clean-webpack-plugin后会清除上次的出口文件
    "fang": "webpack",//这个是打包命令，在出口文件目录产生文件，配置好了clean-webpack-plugin后会清除上次的出口文件
    "fang": "webpack server"//这个是调用本地服务器，不会在出口文件目录产生文件，不会清除上次的出口文件
  },
}

    4. 命令终端窗口打开调用package.json中脚本命令

      npm run build

例子

  • ./package.json

    {
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack",
    "自定义脚本命令": "webpack",

    "start": "webpack --config webpack.config.development.js",
    "开发环境": "webpack --config webpack.config.development.js",

    "build": "webpack --config webpack.config.production.js",
    "生产环境": "webpack --config webpack.config.production.js",

    
    "开发": "cross-env NODE_ENV=development webpack",
    "D": "cross-env NODE_ENV=development webpack",
    "生产": "cross-env NODE_ENV=production webpack",
    "P": "cross-env NODE_ENV=production webpack",


    "fang": "webpack server",
    "server": "webpack server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "html-withimg-loader": "^0.1.16",
    "less": "^4.1.1",
    "less-loader": "^9.1.0",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "postcss-loader": "^6.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.14.5"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

  • ./public/index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script defer="defer" src="production.c70ae7f697e8ce258661.js"></script>
  </head>
  <body>
    <!-- 注释 -->
    <h1 class="className" id="" fang>自己的html文件</h1>
    <div>hot</div>
  </body>
</html>

  • ./src/index.js

    import obj from "./modelA.js";
console.log(obj.sum(1, 2, 3, 4));

import { average } from "./modelB.js";
console.log(average(1, 2, 3, 4));

console.log("111111");
//简书，跨域代理
fetch("/asimov/subscriptions/recommended_collections")
  .then((response) => {
    return response.json();
  })
  .then((value) => {
    console.log(value);
  });

fetch("/fang/asimov/subscriptions/recommended_collections")
  .then((response) => {
    return response.json();
  })
  .then((value) => {
    console.log("66666fang", value);
  });

  • ./src/modelA.js

    const sum=function sum(...params){
  return params.reduce((result,item)=>{
    return result+item;
  })
}
export default {
  sum
}

  • ./src/modelB.js

    import obj from "./modelA.js";

export const average= function average(...params){
  let total=obj.sum(...params);
  return total/params.length;
}

  • ./webpack.config.js

    const path = require("path"); //node.js的路径模块
let outputPath = path.resolve(__dirname, "dist"); //在当前项目的根目录下，创建一个dist文件夹。
// console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

let NODE_ENV = process.env.NODE_ENV || `production`;
const theMode = NODE_ENV;
let outputFilename = `production.js`;
console.log(`NODE_ENV-->`, NODE_ENV);
console.log(`process.env.NODE_ENV-->`, process.env.NODE_ENV);

if (NODE_ENV === `development`) {
  outputFilename = `development.js`;
}

// 1. 导入插件
let HtmlWebpackPlugin = require("html-webpack-plugin");
// const theHtmlWebpackPlugin = new HtmlWebpackPlugin();//默认的配置文件。
const theHtmlWebpackPlugin = new HtmlWebpackPlugin({
  template: "./public/index.html", //指定自己的html文件
  filename: "index.html", //生成的html的文件名称
  hash: true, //给引入的文添加hash值
  minify: {
    collapseWhitespace: true, //去掉html内容空格
    removeComments: true, //去掉注释
    removeAttributeQuotes: true, //去掉属性的引号
    removeEmptyAttributes: true, //属性值为空的去掉
  },
});
const pluginsList = [];
pluginsList.push(theHtmlWebpackPlugin);

//清除之前打包后文件，再打包新的文件。
let { CleanWebpackPlugin } = require("clean-webpack-plugin");
const theCleanWebpackPlugin = new CleanWebpackPlugin();
pluginsList.push(theCleanWebpackPlugin);

let staticDirectory = path.join(__dirname, "dist");

// 这个导出的对象，就是webpack的配置；
module.exports = {
  entry: "./src/index.js", //入口文件路径

  //出口相关配置
  output: {
    filename: outputFilename, //文件名称
    path: outputPath, //输出文件的目录
  },

  mode: theMode, //development开发环境-文件不会压缩，production生产环境-会压缩

  plugins: pluginsList, //2. 使用插件，是一个数组。

  //配置dev-server相关的配置
  devServer: {
    port: "8569", //端口号
    host: "127.0.0.1", //域名
    //compress:true,//是否开启服务器端压缩
    //progress:true,//是否查看编译进度

    //打开页面的路径，访问的资源路径
    static: {
      directory: staticDirectory, //要打开页面的路径。
    },
    hot: true, // 是否热更新
    open: true, // 是否自动打开页面

    // 配置跨域代理服务器
    proxy: {
      //代理路径1，就尽量使用这一种。表示如果fetch("/proxy/jianshu/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
      "/proxy/jianshu/": {
        target: "https://www.jianshu.com",
        pathRewrite: { "^/proxy/jianshu/": "/" }, //路径重写。替换url，缩短原的旧标识
        changeOrigin: true, //是否伪装访问源
        
      },
      //代理路径2，可以写多个。表示如果fetch("/fang/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
      "/fang/": {
        target: "https://www.jianshu.com",
        pathRewrite: { "^/fang/": "/" }, //路径重写。替换url，缩短原的旧标识
        changeOrigin: true, //是否伪装访问源
      },
      //代理路径3，不建议使用根路径。表示如果fetch("/asimov/subscriptions/recommended_collections")-->fetch("https://www.jianshu.com/asimov/subscriptions/recommended_collections");
      "/": {
        target: "https://www.jianshu.com",
        pathRewrite: { "^/": "/" }, //路径重写。替换url，缩短原的旧标识
        changeOrigin: true, //是否伪装访问源
      },
    },
  },
};

  • ./webpack.config.development.js

    const path = require("path");
let outputPath = path.resolve(__dirname, "dist");
console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

module.exports = {
  entry: "./src/index.js",

  output: {
    filename: "index.[hash].js",
    path: outputPath,
  },

  mode: "development", //development开发环境-文件不会压缩，production生产环境-会压缩
};

  • ./webpack.config.production.js

    const path = require("path");
let outputPath = path.resolve(__dirname, "dist");
console.log(`打包完成后输出的目录：outputPath-->`, outputPath);

module.exports = {
  entry: "./src/index.js",

  output: {
    filename: "index.[hash].min.js",
    path: outputPath,
  },

  mode: "production", //生产环境-会压缩
};

进阶参考

方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
在Vue项目中，当使用`uglifyjs-webpack-plugin`进行代码压缩和优化时，可能会遇到打包失败的错误，如"Unexpected token: keyword (const)"。这个错误通常表明代码中存在ES6语法，例如`const`关键字，而`uglifyjs-...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。入门如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-...
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
Webpack中的自定义 loader 的简单实现
weixin_47342624的博客
08-28 397
webpack 中 loader是用于对模块的源代码进行转换（处理）的插件。例如 webpack 中常见的loader， css-loader、babel-loader。关于 loader：loader本质上是一个导出为函数的JavaScript模块，即函数；loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据)；
前端面试题 webpack的工作流程
m0_75276704的博客
08-22 465
loader。
前端面试题-Vite的打包速度为什么比Webpack快?
m0_62300955的博客
08-20 769
Vite的打包速度为什么比Webpack快?
vue2项目 预渲染 Unable to prerender all routes 错误排查与解决方案
qq_44849312的博客
08-23 466
今天在做我的Vue2项目的SEO优化时，我采用了prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。但是，在打包时，报错Unable to prerender all routes。尝试了很多种网上方案，都没有成功，最后从源码排除终于找到了原因。
webpack--webpack的启用
nibabaoo的博客
08-23 448
生产环境模式打包，打包后的代码会进行压缩，代码体积会减小。
路由懒加载
weixin_51416826的博客
08-26 152
将路由配置中的组件从常规的静态导入改为动态导入。
Vue学习--- vue3 集成遇到的部分问题与解决
仗剑执天涯的专栏
08-25 1009
构建异常。
React项目-less、antd配置
StupidlyGrass的博客
08-26 219
Cesium静态资源需要webpack配置，执行npm run eject可以生成webpack配置，运行前先查看当前git版本是否有提交，如果未提交，需要先本地提交git，否则npm run eject会执行失败。② 修改后，在sass配置后添加less配置。② 修改后，在sass配置后添加less配置。（1）搜索“sassRegex”，查找sass配置。（1）提交git（如果版本已经提交，无需执行）2、配置webpack.config.js文件。1、安装less、less-loader。
【AI学习】在魔塔社区玩Ollama：部署GLM4和CodeGeeX4
bylander的博客
08-27 573
尝试了一下CodeGeeX4-ALL-9B 的Ollama部署。GPU要明显快很多，CPU的速度，也还凑合吧
html+css+js网页设计 个人博客模版 我的学习经历7个页面
最新发布
qq_42431718的博客
08-28 263
html+css+js网页设计 个人博客模版 我的学习经历7个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
vue.js学习步骤
m0_63178019的博客
08-23 1128
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
学习大数据DAY44 帆软 report 配置
shh2000424的博客
08-23 1491
署，并设置服务器开机自启动，并请实操演示 得分点（完成得满分，未完成得。服务器容器的端口修改，并将内存调大，请实操演示 得分点（完成得。2 部署 tomcat web 服务。1 安装帆软 report v11。配置环境变量 推荐用自己的名字。等几秒查看下进程或者端口。3 显示 帆软 报表平台。分 服务器开机自启动。初始化设置下用户和密码。在它的第二行上面添加。
Golang学习笔记-Golang中的锁
qq_24428851的博客
08-25 1383
Go标准库的中的sync.Cond是一个条件变量，它可以让一系列的goroutine都在满足特定条件下时候被唤醒，每一个 sync.Cond 结构体在初始化时都需要传入一个互斥锁，我们可以通过下面的例子了解它的使用方法。因为请求的哈希在业务上一般表示相同的请求，所以上述代码使用它作为请求的键。这个是Go语言的扩展包中提供的另外一个信号量，它能够在一个服务中抑制对下游的多次重复请求，比如在redis的缓存雪崩中，能够限制对同一个 Key 的多次重复请求，减少对下游的瞬时流量。上述两个加起来，只占用8个字节。
快速学习“堆“排序（C语言数据结构）
m0_75235246的博客
08-26 686
堆的实现其实并不难，难的是要用堆实现排序，也就是堆的运用。下面需要探究一下堆的排序是怎样的。如何利用堆进行升序或者降序的排序。
vue-cli+webpack多页面实例优化与实践
Vue.js作为现代前端开发的热门框架，其初始设计倾向于单页面应用（SPA），但随着需求的增长，多页面应用的需求也随之而来。作者注意到虽然在手机端项目中，Vue配合vue-router提供了出色的用户体验，但对于多页面应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值