什么是webpack
webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss, TypeScript等），并将其打包成为合适的格式以供浏览器使用。
image.png
webpack 功能
代码转换
- 如把es6转换为es5、把less、sass转换为css
文件优化
- 打包过程中压缩代码体积、合并文件等
代码分割
- 开发多页面时，公共文件的抽离、路由懒加载的功能
模块合并
- 把多个模块合并为一个模块
自动刷新
- 自动启动本地服务，在代码更新时自动更新页面，包括热更新
代码校验
- 检查代码是否符合规范
自动发布
- 打包完成后有自动发布的功能
学习webpack需要提前掌握的内容
- node基础，以及npm的使用
- 掌握es6语法
应掌握的webpack内容
- webpack常见配置
- webpack高级配置
- webpack优化策略
- ast抽象语法树
- webpack中的Tapable
- webpack流程，手写webpack
- 手写webpack常见的loader
- 手写webpack常见的plugin
webpack 安装
- 安装本地的webpack
- webpack webpack-cli -D
初始化项目
- npm init -y
安装命令
- npm install webpack webpack-cli -D
webpack 可以进行0配置
- 打包工具 -> 输出后的结果（js模块）
- 打包 （支持我们的js的模块化）
手动配置webpack
- 默认配置文件的名字 webpack.config.js
- 命令： npx webpack --config webpack.config.my.js
-可配置执行命令为 npm run build 实例如下：
image.png
安装内置服务
- npm i webpack-dev-server -D
执行服务
- npx webpack-dev-server
自动建立html文件并打包到内存中
- 安装插件 html-webpack-plugin
Demo
初始化 npm init -y
安装webpack npm install webpack webpack-cli -D
-
新建 文件夹及文件，目录结构如下
image.png 在index.js中输入代码，如
console.log("This is a test!");
- 执行打包操作 npx webpack
此时会在主目录文件下建立一个dest打包文件，如下
image.png
