webpack4.0学习笔记——初识webpack

什么是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