Webpack入门

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