webpack 前期配置

1.目标

yarn安装应用
安装webpack
配置webpack入口和出口文件
编译模板文件
删除dist无用打包文件
实时打包
css之loader安装应用
less之loader安装应用

2.什么是webpack

目标：了解webpack是做什么用的

WebPack是静态资源文件打包机器

对css文件打包处理

对less文件打包处理

对ttf文件打包处理

对img文件打包处理

对es6、es7做降级处理打包

对vue文件打包处理

以上内容经过webpack可以一次性做全部转码、降级处理，使得开发速度更高效

并且打包好的文件内容可以供所有浏览器识别使用

作用：

打包
对高级内容一次性做转码、降级处理

3.什么地方适合使用

目标：知道webpack擅长在什么地方使用

spa项目(后台项目、手机移动端)
vue、react、angular都要使用

4.yarn方式安装包

npm i -g yarn //全局方式安装yarn依赖包
yarn --version // 查看yarn版本
配置淘宝镜像:yarn config set registry https://registry.npm.taobao.org
查看确认镜像是否正确:yarn config get registry

yarn 依赖包管理

yarn  remove 包 // 卸载 npm uninstall 包
yarn            // 给当前项目安装全部依赖包 npm i
yarn -y init   // 初始化package.json文件  npm -y init
yarn add -D 包 // 开发依赖方式装包  npm i -D 包
注意：
yarn安装完毕后，立即配置taobao镜像

5.隔行换色案例

目标：通过jquery给无序列表li标签实现隔行换色效果
步骤:

1. 创建01-pack项目运行目录
2. 创建package.json文件  yarn -y init
3. 给项目安装jquery依赖包  yarn  add jquery
4. 创建目录文件 src/index.html   src/index.js
5. 在src/index.js中实现li标签隔行换色代码实现
6. 在src/index.html里边引入jquery.js和 src/index.js，并绘制许多li标签
7. 现在隔行换色效果就会呈现

1567994078385.png

注意：

src目录暂时是固定的，后期可以自定义
src/index.js   src/index.html 两个文件名字暂时是固定的，后期可以自定义
现在隔行换色页面需要加载两个静态文件(jquery.js 和 index.js)
目标：通过webpack打包以上两个文件变为一个

6.webpack安装配置

webpack官网：https://webpack.docschina.org/
目标：能够安装、配置webpack
步骤：

1. 安装webpack和相关依赖包  yarn add -D webpack webpack-cli
2. 在package.json文件中设置如下内容
         "scripts":{
           "build":"webpack"
         },
   现在就可以在命令行中执行 npm run build使用webpack了
   
   注意：

需要通过-D 开发依赖方式安装，yarn中 -D 和 --dev互为别名，npm中 -D 和 --save-dev互为别名

要安装两个依赖包webpack和webpack-cli，后者是前者的内部依赖

build是自定义名称

原理：
webpack默认会寻找 src/index.js 文件(本身包括两部内容：jquery.js和隔行换色代码)，编译处理之，就重新打包到 dist/main.js里边去了

1567996165342.png

8.打包模式

目标：可以给webpack配置不同的打包模式

现在打包会提示警告信息，提示没有设置mode模式
步骤:

1. 在项目根目录创建名称为 webpack.config.js 的配置文件
2. 在webpack.config.js中做如下配置
       module.exports = {
         // production:生产模式，打包好的文件内容是优化压缩的
         // development:开发模式，打包好的文件内容适合开发调试，有适当的空白、回车、注释
         mode: 'development'
       };
   项目开发阶段适合使用 development 开发模式，开发完毕部署上线后使用 production

webpack