webpack

目录

前端工程化

webpack基本使用

webpack插件

webpack中的loader

打包发布

Source Map

---

前端工程化

前端工程化：在 企业级的前端项目开发 中，把前端开发所需的 工具 、 技术 、 流程 、 经验 等进行规范化、 标准化。例如企业中的 Vue 项目和 React 项目，都是基于 工程化的方式 进行开发的，目前主流的前端工程化解决方案有 webpack，parcel。

其中webpack 提供了友好的 前端模块化开发 支持，以及 代码压缩混淆 、 处理浏览器端 JavaScript 的兼容性 、 性 能优化 等强大的功能。 让程序员把 工作的重心 放到具体功能的实现上，提高了前端 开发效率 和项目的 可维护性 。 目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的

webpack基本使用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会 先读取这个配置文件 ，从而基于给定的配置，对项目进行打包； 在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

① 默认的打包入口文件为 src -> index.js

② 默认的输出文件路径为 dist -> main.js

安装 webpack 相关的两个包

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化

module.exports = {
  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
  // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
  // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
  mode: 'development',
// entry: '指定打包的入口'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'main.js'
  },
}

在 package.json 的 scripts 节点下，新增 dev 脚本即可 运行 npm run dev 命令，启动 webpack 进行项目的打包构建

"scripts": {
    "dev": "webpack",//scripts节点下的脚本，可通过npm run执行
    "build": "webpack --mode production"
  },

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下

 devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在 http 协议中，如果端口号是 80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },

webpack插件

webpack-dev-server: 类似于 node.js 阶段用到的 nodemon 工具,每当修改了源代码，webpack 会自动进行项目的打包和构建，配置了 webpack-dev-server 之后，打包生成的文件 存放到了内存中，提高了实时打包输出的性能

//先安装插件
npm install webpack-dev-server@3.11.2 -D

//再配置package.json

 "scripts": {
    "dev": "webpack serve",
  },

html-webpack-plugin: 可以通过此插件自定制 index.html 页面的内容

//安装插件
npm install html-webpack-plugin@5.3.2 -D

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})
module.exports = {
    mode: 'development',
    plugins: [htmlPlugin],// 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
}

webpack中的loader

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。 其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错 ！

test 表示匹配的 文件类型 ， use 表示对应 要调用的 loader， 多个 loader 的调用顺序是： 从后往前调用

 

//安装处理css文件的loader
npm i style-loader@3.0.0 css-loader@5.2.6 -D

//所有第三方文件模块的匹配规则
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性，不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },

 

打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布到生产环境。

• 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
• 开发环境下，打包生成的文件不会进行代码压缩和性能优化

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"//项目发布时运行build命令
  },
//通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项

 

Source Map

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情。

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

​​​​​​​

module.exports = {
  // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
  // devtool: 'eval-source-map',
  // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
  // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
  // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
  mode: 'development'
}，