背景:
Javascript工程项目越来越大,如果采用原来在使用<script>标签引入的js文件,会非常的麻烦。于是js工程师开始考虑使用模块的概念,编写各个模块通过打包工具(webpack,vite等)将这些模块进行组装。Webpack就是其中一个很出色的模块打包工具。
使用:
1、初始化项目 npm init,会生成一个package.json文件,其中的内容相当于npm的说明书,记录项目名称 版本和仓库。
2、npm安装 webpack 和webpack-cli
webpack 是webpack核心,webpack-cli 是webpack的命令行工具,装了它就可以使用npx 命令了。
3、webpack命令打包命令,和简化方法
npx webpack --entry = ./index.js --mode=’development’
--entry指定打包其实模块,告诉webpack从这个文件开始组合模块
--mode 告诉webpack是开发环境打包还是生产环境打包。此外还有生产环境关键字 production
简化:每次打包如果都输入上面那么长的命令,会很麻烦,那么可以使用scritps脚本来简化命令。 在webpack.json中添加一个
'scripts':{
"build":"webpack --entry=./index.js --mode='development'"
}
此时就可以使用 npm run build 代替之前一长串的命令
4.webpack.config.js文件(webpack配置文件)
为什么叫webpack的配置文件?因为一个项目webpack的配置项可能会有很多,如果还在webpack.json中的命令中添加参数,后续会非常难以维护。因为webpack.config.js配置文件就应运而生,我们可以将命令行参数在这个文件中维护。
module.exports={
entry:'./src/index.js',
output:{
filename:'main.js' // 输出文件名
},
mode:"development" //
}
此时webpack.json文件中命令行可以改为
'scripts':{
"build":"webpack"
}
注:webpack打包默认入口文件为 scr/index.js,打包后的文件路径为 dist目录
此时运行,npm run build
5、webpack-dev-server简化开发时的打包工作。
在此之前没完成一个或者一段代码编写,调试前都得调用执行一次npm run build 这样挺繁琐。为了解决这个问题,社区提供了webpack-dev-server,在开发阶段开发者不用打包就能调试自己代码。
在webpack.json中配置命令
"scripts":{
"build":"webpack",
"dev":"webpack-dev-server"
}
还需要再webpack.config.js中配置开发服务
module.exports={
entry:'./src/index.js',
output:{
filename:'main.js' // 输出文件名
},
mode:"development", //
devServer:{
publicPath:'/dist' // 开发者服务器会从dist中拿资源
}
}
webpack-dev-server 打包存在于内存中。