webpack打包处理

简介

 webpack 是前端最流行的打包工具，能够做到以下：
1） 将 sass/less 等预编译的CSS语言 转化为 浏览器能够识别的 css 文件
2 ）能够将多个文件（比如：多个sass文件）打包生成一个文件
3 ）能够打包 images/styles/assets/scripts 等前端常见的文件
4 ）搭建了开发环境（开启了服务器）

5 ）监视文件变化，文件改变后，能够自动刷新浏览器
6 ）对于Vue来说，可以将 单文件组件（*.vue） 类型的文件，转化为浏览器能够识别的内容

项目打包上线：
1 ）只需要执行一条命令： npm run build 就可以对项目进行打包处理
2） 所有文件（css/js/html） 的压缩合并
3 ）在打包的过程中分离或者合并文件
4 ）能够通过代码分离功能实现项目的按需加载

四个核心概念

 入口 entry

 出口 打包后输出内容

loaders 加载器：对于非JS的静态资源

plugins 插件

使用步骤

1 安装： npm i -D webpack webpack-cli

2 webpack 使用的两种方式：

 2.1 命令行的使用方式

 2.2 配置文件

命令行使用方式：

webpack 入口文件 出口文件路径

最基本的打包: webpack ./src/main.js

index.html引入js文件：

<script src="./node_modules/jquery/dist/jquery.js"></script> 

注意:使用 webpack 的时候应该提供mode, 可以是: production 或者 development

// production 表示: 生产模式 -- 生产环境(也就是给用户使用的)