掌握webpack的常用配置
Entry
Output
Module>rules
学会使用常用插件webpack-dev-server
一、模块回顾
1.CommonJS化规范
(1)什么是一个模块?一个文件就是一个模块,模块内部的变量私有,外部不可访问
(2)如何暴露私有标识符(变量或者函数)?Module.exports
(3)其他文件如何引用暴露出来的标识符? 通过require引入
2.Es6模块
(1)什么是一个模块?一个文件就是一个模块,模块内部的变量私有,外部不可访问
(2)如何暴露私有标识符(变量或者函数)?Export default export const | var | let
(3)其他文件如何引用暴露出来的标识符?Import
Export default Hello Export const a = 10;
Export let c = 20;
Import Hello1 from 路径 Import {a,c} from 路径
二、webpack简单使用(不使用配置文件)
1.执行yarn init -y初始化一个package.json
2.本地安装webpack@3.8.1 yarn add webpack@3.8.1 -D (webpack只在开发环境需要,所以要加上-D)
3.在 package.json中配置命令
备注:webpack后面第一个参数是入口文件 第二个参数,是出口文件夹以及文件名
4.新建模块
(1)Src
①A.js a.js是一个入口文件,它引用了b.js
②B.js
5.在当前根目录通过webpack命令打包 yarn build
三、通过配置文件打包项目
1.在项目的根目录新建webpack.config.js (重要配置项如下)
(1)Entry:表示入口文件路径和文件名
(2)Output 配置出口文件路径以及文件名
①Path :表示文件的输出路径
②Filename:表示输出文件的文件名
2.配置好文件后如何打包??
(1)在package.json中配置命令
注意:webpack屁股后面没有参数,一旦执行yarn build命令之后,会直接去找到当前的配置文件webpack.config.js,根据里面的配置进行打包
四、webpack和webpack-dev-server打包项目的区别
打包后文件输出路径所参照的配置项不同 打包后生成的文件存放位置 引入图片后返回值 做了几件事
Webpack Output–>path 硬盘里面(能看见) 图片的名称 只做了一件,打包项目
Webpack-dev-server Output–>publicPath 内存里面(看不见,浏览器访问内存的速度更快) 图片的完整路径 两件:
1.打包项目
2.启动一个本地服务器(自动编译,并实时刷新浏览器)