webpack是什么?
webpack是一个Javacript应用程序得静态模块打包器
webpack有什么作用?
1.模块化打包
webpack会将项目的资源文件当成一个一个模块,模块之间会有依赖关系,webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别,最后将应用程序需要的每个模块打包成一个或者多个bundle。
Webpack环境配置和简单打包
1.安装node
node官网地址: https://nodejs.org/zh-cn/
2.模拟创建一个基本的项目
例如在百度这个页面按下ctrl+s保存,然后把html文件拖到一个空的文件夹下
3.创建package.json文件
使用cmd命令行进入到项目所在的目录下,输入命令:npm init 。然后一直按enter键。按安装完成后项目的目录下会多一个package.json的文件
4.安装webpack
命令行中输入 : npm install --save-dev webpack-cli
5.打包
打包有两种模式:webpack --mode development、webpack --mode production。第一种是用于开发环境中,而第二种是用于生产环境中。它们的区别在于第二种的打包方式会将代码文件压缩,会把所有的空格、换行、缩进都消去。
因为打包默认entry入口 src/index.js,默认output出口 dist/main.js。
因此首先创建一个src的文件夹,然后再在里面创建一个index.js文件,随便输入一行代码。例如console.log(1+1)
然后在package.json文件下添加scripts
最好设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。
运行完成后会在项目目录下多出一个dist文件夹,里面的main.js就是打包后的js文件。
配置webpack.config.js
沿用上面的项目文件,先把src和dist的文件夹删除。然后创建一个public文件夹,里面有个index.js文件。然后:
1.新建一个webpack.config.js
2.配置入口entry(所需打包的文件路径)
3.配置出口output
(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称
4.在命令行中执行 npm run dev
此时就会创建有个build文件夹,里面就是打包后的文件
入口entry和出口output进阶用法
1.入口entry
1.1单入口
单文件:
例如: entry:‘./src/index.js’
多文件:
在你想要多个依赖文件一起注入,并且将它们的依赖导向到一个“chunk”时,传入数组的方式就很有用。
例如:
1.2多入口
例如:
2.出口output
2.1单出口
例如:
2.2多出口
例如:
[name] 原文件的名字
注意:多入口要配合多出口使用
多入口、多出口示例:
命令行运行 npm run dev后,build文件夹下多出两个文件
配置webpack-dev-server
什么是webpack-dev-server?
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
1.为静态文件提供服务
2.自动刷新和热替换(HMR)
1.安装: webpack-dev-server
命令行输入:npm install --save-dev webpack-dev-server
2.配置webpack.config.js文件
3.配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
4.在build文件夹下新建index.html文件,在html中引入main.js
5.在命令行程序运行npm run start
然后会自动弹出网页,查看控制台输出: