webpack基本使用步骤

掌握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.启动一个本地服务器（自动编译，并实时刷新浏览器）