webpack打包普通html项目,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文件：

注意:使用 webpack 的时候应该提供mode, 可以是: prod