最近在学习webpack，他是一个模块打包工具，用来构建前端开发项目，方便前端开发中的文件管理与打包，感兴趣的朋友可以到webpack官网看看
webpack的安装
1.全局安装：npm install webpack webpack-cli -g
2.局部安装：进入到项目文件夹里执行npm install webpack-cli
备注：webpack是工具包，webpack-cli是命令行工具，安装命令行工具之后就可以在命令行中使用webpack命令了，他会找到webpack,建议使用局部安装，因为不同项目可能存在使用不同版本webpack的情况
webpack配置文件webpack.config.js
webpack有默认的配置文件，但你直接执行webpack时会调用他默认的配置文件，如果希望自定义配置则需要在文件夹根目录中（与package.json同级,如果没有该文件可以通过npm init -y生成）创建一个名为webpack.config.js的文件，文件内容（简要）：
moudle.exports = {
mode:'development',//production会自动压缩
//entry:'./index.js',//项目的入口文件，webpack会从这个文件开始读取整个项目的依赖模块
entry:{
main:'./index.js'
},
output:{
filename:'main.js',//自定义打包后的文件名称
path:__dirname+'/public'//自定义打包后的文件路径
}
}
执行webpack
1.直接执行文件（全局）：webpack index.js,直接执行该命令，webpack会打包index.js，同时会把index.js中引入的模块打包到默认的路径里，只执行该命令webpack会执行默认的配置文件，使用的是全局安装的webpack
2.直接执行文件（局部）：npx webpack index.js,这个命令多了一个npx,他的作用是使用项目安装的webpack打包而不是全局安装的webpack打包，命令行中默认条用的都是全局命令，执行该命令webpack会执行默认的配置文件
3.配置文件：如果项目中已经配置的webpack.config.js文件，那么直接执行npx webpack就好了，他会找到该文件中的entry定义的入口文件，导出到指定路径并命名
4.npm执行：在项目里的package.json文件的script配置项中，配置命令
{
"name": "webpack",
"version": "0.1.0",
"private": true,
"scripts": {
"bundle": "webpack"
}
}
备注：在这里配置的命令会默认执行项目中的命令行而忽略全局安装的命令行，所以可以不使用npx执行
网友评论