什么是webpack?
- webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
webpack能做什么(为什么要用webpack)?
- 代码转换:比如浏览器识别不了xx.vue文件,或者xx.ts文件,webpack将其转化成es5的xx.js文件,浏览器遂能识别,并进行渲染。
- 文件优化、模块合并、自动刷新(热更新)、代码校验、自动发布
webpack的使用
安装方法一
- 1.运行npm i webpack -g全局安装webpack(全局安装只要电脑系统没有bug或系统重装外,以后都不需要再安装)
- 2.再安装npm install webpack-cli --g(webpack4.0需要安装),这样就能在全局使用webpack的命令
安装方法二
- 在项目根目录中运行npm i webpack --save-dev和npm install webpack-cli --save-dev安装到项目依赖中,并且是开发环境用,生产环境用的是打包后的代码,用不到webpack
webpack原始打包运行方式
- webpack 会去项目的根目录下寻找webpack.config.js配置文件,用其中的配置打包,默认只能打包js
- 如果没有webpack的配置文件,会用默认条件打包,项目打包入口默认./src/index.js,出口默认根目录下的./dist/main.js
- webpack --config 配置文件名 (配置文件名不能是webpack.js,会导致webpack的命令是进入webpack.js文件)
无配置文件运行webpack
E:\my>webpack
Hash: 1acf1ac3a7236ec3a4b6
Version: webpack 4.41.4
Time: 187ms
Built at: 2019-12-27 15:03:17
Asset(出口) Size Chunks Chunk Names
main.js 946 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 18 bytes {0} [built] // 打包入口
// 运行webpack,不配置其他,会默认去项目根目录下的src目录下的index.js文件为入口。
// 所以如果没有配置文件,也要创建src/index.js为项目打包入口
// 项目出口,默认根目录下的dist文件夹下的main.js
// 现在如果想浏览器解析node中语法,必须在html中引入打包后的main.js文件
有配置文件运行webpack
E:\my> webpack --config webpack.name.js // 可以修改默认的webpack.config.js的配置文件名称
为了简便在package.json文件中配置命令(脚本)
"scripts": { // 脚本
"server": "webpack --config webpack.name.js"
//当运行npm run server的时候等同于运行了webpack --config webpack.name.js 命令
},
有配置文件在vue中运行webpack
- 运行npm run server 就是运行webpack-dev-server
- 可以理解为webpack-dev-server是webpack的运行插件
- 运行webpack-dev-server其实运行了webpack.config.js里面的devServer:{}的配置
1.安装:npm i webpack-dev-server -D
2.需要在package.json中的脚本中去配置
"scripts": {
"server": "webpack-dev-server"
}
3.在配置文件中配置:例如在:webpack.config.js
module.exports = {
// 运行webpack-dev-server后,生成的内存包是整个项目,并且默认首页显示是项目目录
devServer:{ //开发服务器配置(或者说本地服务器配置)
port:3000,//指定本地服务器端口
progress:true,//有打包的进度条
contentBase :'./src', // 指定打包的基础路径,src为根路径打包,也就是只打包src里面的文件
compress:true //智能压缩
},
}