webpack学习（一）

01、webpack概念
概念：前端项目工程化的具体解决方案（主流框架vue，react都是基于webpack进行工程化开发的）。
主要作用：①代码压缩混淆（删除空格及注释，让代码体积更小，提升页面打开速度）；
②处理浏览器JS兼容性（如：在IE8中只能用var，不能用let，webpack可以把ES6等高级代码转化为IE8等低级的代码）
③性能优化
好处：提高开发效率和工程维护性。
02、webpack在项目中安装
在终端中运行安装webpack的包及脚手架(安装webpack失败，管理员打开cmd安装)
（注：指定版本号则安装版本号，不指定则安装最新）

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

npm不指定版本安装最新

npm install --save-dev webpack

yarn不指定版本安装最新

yarn add webpack --dev

安装成功则项目中json文件(json文件中加注释会报错)有：
注： "devDependencies"只在开发阶段用到的包，安装时用-D（–save-dev的简写），如npm install webpack@5.42.1 webpack-cli@4.7.2 -D

  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }

注：“dependencies”: 开发与上线都要用到的包，安装时用-S（–save的简写），如npm install jquery -S

  "dependencies": {
    "jquery": "^3.6.0"
  },

03、webpack在项目中配置与使用
①在webpack.config.js的wenpack配置文件，并初始化基础配置:
Node.js中的导出语法，向外导出一个webpack的配置对象.
/mode指定构建模式不同的开发阶段(开发模式与生产（上线）模式)development与production.

module.exports = {
	mode: 'development' 
}

②在package.json的scripts节点下，新增dev脚本：
注：dev是名字可以自己定义，webpack是命令
script节点下的脚本，可通过npm run执行，如npm run dev

"scripts": {
	"dev": "webpack"
}

③启动webpack，在终端中运行npm run dev:
运行后会生产打包文件夹dist和文件main.js;但是没有压缩。
当把wenpack.config.js的wenpack配置文件中，把development改为production则会压缩main.js文件。
development：开发时使用，不压缩文件，仅仅打包，打包速度快。

module.exports = {
	mode: 'development' 
}

production：项目上线时使用，压缩打包文件，速度慢。

module.exports = {
	mode: 'production' 
}

04、webpack在项目中默认规则
运行webpack报错因为名字没有src或者没有index.js
①默认打包入口文件 src -> index.js
②默认的输出文件路径为 dist -> mian.js
注:可以在webpack.configh.js中修改
自定义webpack打包的入口和出口：
在webpack.config.js配置文件中，通过entry节点指定打包的入口（entry: ‘指定打包文件’）。通过output节点指定打包的出口(output: {path:‘指定存放目录’, filename:’'生成文件名})。

module.exports = {
	entry: path.jion(__dirname,'./src/index1.js')
	output: {
	path: path.join(__dirname, 'dist1'),
	filename: 'mian1.js'
 }
}

注：报错，改变指定规格后需要更改html中script引入文件目录