|
1.常用功能：
- 压缩：压缩成几kb
- 打包：一堆文件打包成一个文件
- 多种文件的编译：less编译成css再用
- 脚手架：先搭一个项目框架，基本的结构搭出来，直接写组件，写代码
- 生成：生成一个生产用的版本
2.全局安装
npm i -g webpack-cli
第一步：首先做一个基本项目初始化：cnpm init -y,来创建一个package.json(用来帮我们把依赖存起来等等)
第二步：下载一个jquery:cnpm i jquery
第三步：配置文件（也叫核心文件）手动添加一个webpack.config.js文件,里面至少包含三个东西如下：
const path=require('path');
module.exports={
mode:'development', //1.模式，决定webpack如何工作的(development:开发模式,输出调试信息)
entry:'./src/index.js', //2.从哪个文件下开始编译(webpack是工作node.js下边的所以在本地引入的时候最好加./)
output:{
path:'path.resolve(__dirname,'dest')', //(注意：__dirname指当前的路径，不管路径换到哪里)
filename:'bundle.min.js'
} //3.输出，打包 output里面必须是json
}
3.打包后页面.html文件引入的js是打包后的js文件：
打包前：<script src="src/index.js"></script>
打包后：<script src="dest/bundle.min.js"></script>
补充：
mode：
none 不优化
development 输出调试信息
production 最高优化，启用压缩，忽略错误
entry:入口
单入口——SPA 适用于单页应用，像vue ,react
多入口——MPA 日常多个页面
output:输出
{
path:路径 必须是绝对路径 用path.resolve解析出来
filename：文件名
}
多入口举例：
entry:{
index:'./src/index',
news:'./src/news'
} //左边名字随便取
output:{
path:'path.resolve(__dirname,'dest')',
filename:'[name].min.js'
}//[name] 对应入口的index，news,打包出来两个文件index.min.js,news.min.js | 
转播
