黑马webpack总结

webpack的基本使用

1，什么是webpack？

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

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

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的

2，在项目中安装webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install [email protected] [email protected] -D

ps: -D的意义是将webpack文件安装在开发版本中，也就是devDependencies 仅在开发环境下使用。

扩展：

npm安装时-S -D分别的意思 -S 即--save（保存） 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在 -D 即--dev（开发） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会再package.json中显示。

3，在项目中配置webpack

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

module.exports = {

mode:'development' // mode用来指定构建模式。可选值有development 和 production

}

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

“script”：{

“dev” : "webpack" // script 节点下的脚本，可以通过 npm run dev执行

}

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

mode 的可选值

mode 节点的可选值两个，分别是：

① development

⚫ 开发环境

⚫ 不会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度快，适合在开发阶段使用

② production

⚫ 生产环境

⚫ 会对打包生成的文件进行代码压缩和性能优化

⚫ 打包速度很慢，仅适合在项目发布阶段使用

4，webpack.config.js 文件的作用

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

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

5，webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

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

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

注意：可以在 webpack.config.js 中修改打包的默认约定

6，自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

module.exports = {

entry: path.join(__dirname,'./scr/index.js'), //打包入口文件路径

output：{

path：path.join(__dirname,'./dist'), // 输出文件的存放路径

filename：‘bundle.js’ //输出文件的名称

}

}

webpack 中的插件

1，webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 we