Vue3+TS Day06 - webpack基础用法、解析js
2021-11-30 本文已影响0人
望穿秋水小作坊
一、webpack 基础概念理解
1、为什么会出现脚手架？webpack 在前端脚手架的地位如何？
- 【脚手架的出现】
：目前前端开发已经变得越来越复杂了，所以需要一个工具来统一管理各种插件，让开发更加专注于业务的代码。 - 【webpack 的地位】前端流行的三大框架 Vue、React、Angular 的脚手架都是基于 webpack 的
image.png
image.png
2、官方对 webpack 的定义（定位）是什么？
- webpack 是一个静态的模块化打包工具，为现代的 JavaScript 应用程序；
image.png
image.png
3、webpack 在 Vue 项目中做了哪些事情呢（从 js、css、html、img资源的角度回答）？
image.png
4、webpack 的安装，webpack 和 webpack-cli 之间的关系？
image.png
image.png
二、webpack 基础使用对 【js】
1、webpack 默认打包（对 js 的处理）
image.png
image.png
2、webpack 每个项目会有不同的配置，一般有一个默认配置文件，是什么文件？
-
webpack.config.js文件
image.png
image.png
3、webpack 是如何判断哪些文件需要打包的呢？（重要）
image.png
三、webpack 基础使用对 【css】
1、对上述项目添加 style.css 文件，再打包会报错吗？
- webpack 会报错，说不认识 css 文件
image.png
2、css-loader 的使用？
image.png
image.png
image.png
3、 配置了 css-loader，但是还是样式无法展示，为什么呢？
-
css-loader只负责解析 css，还需要将 css 插入到对应的 html 标签中，所以还需要style-loader
image.png
image.png
4、在我们开发中，我们可能会使用 less、sass、stylus 的预处理器来编写 css 样式，效率会更高。那么如何让我们的环境支持这些预处理器呢？
- 首先我们需要确定，less、sass等编写的 css 需要通过工具转换成普通的 css；
image.png
image.png
image.png
5、PostCSS 工具是做什么的呢？如何在命令行中使用？如何在 webpack 使用呢？
- PostCSS 是一个通过 JavaScript 来转换样式的工具；
- 这个工具可以帮助我们进行一些 CSS 的转换和适配，比如自动添加浏览器前缀、CSS 样式的重置；
image.png
image.png
image.png
image.png
image.png
6、postcss-preset-env 是什么？
image.png
