文章目录
webpack
笔记大概
- 模块化 - 模块化解决什么问题的? - 为什么要用模块化 - 前端模块化的实现 - webpack - webpack的作用 - webpack的使用
loader 和 plugins的简单理解
# loader 和plugins的简单理解, 仅参考 loader:每个符合条件的文件都会运行一次,plugin:打包只会运行一次。 loader:一个函数即可实现 plugin:一个类实现(因此解释了为什么需要new XXXplugin)。 loader一般用于处理一些语法 使用ast解析。plugin一般会做一些打包能力上的扩展 # -------------------- loader 是转码、编译、打包工具,每种非浏览器直接解析识别的语言,语法,都需要对应的 一个或多个loader 去转码,或者编译,plugin 官方定位,解决 loader 无法实现的事,比如在 loader 的过程中,有一些特殊的情况,需要特殊处理,比如打包时,某个文件,不需要编译,直接从源码目录复制到打包之后的目录这种需求.
webpack
安装
webpack
是一个使用Node.js
实现的一个模块化代码打包工具, 所以, 我们需要先安装webpack
, 安装之前确定拥有Node.js
环境.npm install -D webpack webpack-cli
🚩 注: 不推荐全局安装
webpack-cli
: 提供webpack
命令, 工具, 类似于create-react-app
webpack
:webpack
代码, 类似react
webpack使用
- webpack 的执行文件和命令
// webpack的可执行文件 ./node_modules/.bin/webpack // 查看版本 ./node_modules/.bin/webpack -v // 该命令可能webstorm会提示没有该命令, 可以切换到命令行工具下,对应的文件目录下执行
🚩 注意:
- 执行 `webpack -v` 命令查看的是 `webpack-cli` 的版本儿 - 执行 `./node_modules/.bin/webpack -v` 查看的才是webpack的版本儿
- 也可以通过编辑
package.json
的scripts
来简化命令行输入
// package.json { ... "scripts":{ "webpack":""./node_modules/.bin/webpack -v"", "webpack": "webpack" // scripts 中可以定位到 ./node_modules/.bin/ 目录下 } }
scripts
中使用test
,start
,restart
,stop
命名的时候, 可以在调用的时候省略run
命令, 直接执行. 即可以直接执行npm start
- 另外, 还以使用更加方便的方式:
npx webpack
通过
npx
命令可以帮助我们定位到./node_modules/.bin/
的目录下.🚩 注:
npx 是npm5.2+ 版本只有增加, 如果没有, 可以使用 npm install -g npx 来安装.
打包模块
入口文件
入口文件就是我们项目中加载的第一个文件,
webpack
会从指定的入口文件开始分析所有依赖的文件, 然后递归加载打包成一个完整的文件
打包命令
webpack ./src/main.js
上面命令会使用
webpack
默认的一些配置对模块文件进行打包, 并把打包后的文件输出到默认创建的./dist
目录下, 打包后的文件名称默认为main.js
模块文件打包后, 就可以在不支持
es6
模块语法的浏览器环境下引入使用,了.
打包文件分析
- 打包命令执行后, 会把分散的多个模块文件打包的一个文件中, 不需要外部引入了.
- 内置了一个小型的模块加载器(类似
requireJS
) 实现了打包后的代码隔离与引用.- 🚩 我们查看和分析打包后的文件可以看出, 打包后的每一个模块打包到一个有单独作用域的函数中, 保证了模块的独立性. 而这个函数中会默认注入三个参数:
module
__webpack_exports__
__webpack_require__
这三个参数,来实现webpack
的一些相关的功能.
打包配置 webpack.config.js
通常, 在项目的根目录下, 我们可以创建一个
webpack.config.js
文件来配置选项实现更加方便的打包功能.
webpack
命令在运行的时候, 会默认读取运行命令所在的目录下的webpack.config.js
文件.当然我们也可以通过
--config
选项来指定读取配置文件的路径:webpack -- config ./configs/webpack.config.js
配置文件:
因为
webpack
也是基于node
的一个模块化管理工具, 通常我们配置文件也是以commonjs
的模块化规范来定义配置文件对象.module.exports = { ...//这里是webpack的一些配置选项 }
webpack的核心配置
mode
mode
模式:"production" "development" "none"
三种.模式module.exports = { mode:'development' }
entry 入口
entry
入口, 是指定webpack
打包读取的入口文件. 有三种不同的入口方式
string
object
和array
的编写方式
- 单入口文件
// webpack.config.js module.exports = { mode:"development", entry:"./src/main.js" }
- 多入口文件, 一个
target
打包文件
// webpack.config.js module.exports = { mode:"development", entry:[ //多入口,一个出口的时候,通常以数组形式写入口配置即可 "./src/main.js", "./src/index.js" ] }
- 多入口文件,多个
target
打包文件