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
两个相关的包:
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
在项目中配置 webpack
-
在项目根目录中,创建名为
webpack.config.js
的webpack
配置文件,并初始化如下的基本配置:module.exports = { mode: 'development' // mode 用来指定构建模式。可选值有 development 和 production }
-
在
package.json
的 script 节点下,新增dev
脚本,如下:"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中的默认约定
- 默认的打包入口文件为
src -> index.js
- 默认的输出文件路径为
dist -> main.js
上述默认约定,可以在 webpack.config.js 文件中修改
自定义打包的入口与出口
在 webpack.config.js
配置文件中,通过 entry
节点指定打包的入口。通过 output
节点指定打包的出口。示例代码如下:
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出的文件名称
}
}
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调用过程
/*
将要被 webpack 打包处理的文件模块
是否为 js 模块
是;是否包含高级 js 语法
是;是否配置了 babel
是;调用 loader 处理
否;报错
* 否;webpack 进行处理
否;是否配置了对应 loader
是;调用 loader处理
否;报错
*/
打包发布
为了让项目在生产环境中高性能的运行
共有 0 条评论