webpack基础知识

前端工程化

在企业级的前端项目开发中，把前端所需的工具、技术、流程、经验等进行规范化、标准化。（企业级的 Vue 和 React 项目都是基于工程化的方式进行开发的）

• 早期的前端工程化解决方案

  • grunt（https://www.gruntjs.net/）
  • gulp（https://www.gulpjs.com.cn/）

• 目前主流前端的工程化解决方案

  • webpack（https://www.webpackjs.com/）
  • parcel（https://zh.parceljs.org/）

webpack 的基本使用

webpack 是前端项目工程化的具体解决方案

功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大功能。

好处：让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

目前 Vue，React 等前端项目，基本上都基于 webpack 进行工程化开发的

在项目中安装 webpack

安装 webpack 两个相关的包：

在项目中配置 webpack

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

   module.exports = { mode: 'development' // mode 用来指定构建模式。可选值有 development 和 production }

   1 2 3

   module.exports = {   mode: 'development' // mode 用来指定构建模式。可选值有 development 和 production }

2. 在 package.json 的 script 节点下，新增 dev 脚本，如下：

   "script": { "dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行，例如 npm run dev }

   1 2 3

   "script": { "dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行，例如 npm run dev }

mode 的可选值

• development

  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快，适合在开发阶段使用

• production

  • 生产环境
  • 会对打包生成的文件进行代码压缩和性能优化
  • 打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js 文件的使用

webpack.config.js 是 webpack 的配置文件。 webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

webpack中的默认约定

1. 默认的打包入口文件为 src -> index.js
2. 默认的输出文件路径为 dist -> main.js

上述默认约定，可以在 webpack.config.js 文件中修改

自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry节点指定打包的入口。通过 output 节点指定打包的出口。示例代码如下：

webpack 的插件

webpack-dev-server

让 webpack 监听项目源代码的变化，从而进行自动打包构建。

html-webpack-plugin

webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

webpack 的loader

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

作用

协助 webpack 打包处理特定的文件模块。

• css-loader 可以打包处理 .css 相关的文件
• less-loader 可以打包处理 .less 相关的文件
• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

loader调用过程

打包发布

为了让项目在生产环境中高性能的运行