[JavaScript知识库]webpack中执行语句

ps:一下代码均在安装完node.js后，以管理员启动命令提示符中使用

1.新建空白项目

npm init -y

2.安装jQuery

npm install jquery -S

3.运行（以方法名为dev进行操作）

npm run dev

4.mode节点中的属性

4.1development，开发环境，不会对打包生成的文件进行代码压缩和性能优化，打包速度快，适合在开发阶段

4.2production，生产黄精，会对打包生成的文件进行代码压缩和性能优化，打包速度慢，适合在发布阶段

5.webpack.config.js

const path = require('path')
module.exports = {
	//entry:'指定要处理那个文件'
	//这个path是核心模块
	entry:path.join(__dirname,'./src/index1.js'),
	//指定生成的文件要存放到哪里
	output:{
		//存放到目录
		//这个path是属性
		path:path.join(__dirname,'./dist'),
		//生成的文件名
		filename:'bundle.js'
	},
}

6.webpack-dev-server

每当修改了源代码，webpack会自动进行项目的打包和构建

npm install webpack-dev-server@3.11.2 -D

7.html-webpack-plugin

可以通过此插件自定制index.html页面的内容

npm install html-webpack-plugin@5.3.2 —D

8.devServer

对webpack-dev-server插件进行配置

devServer:{
	//首次打包成功后，自动打开浏览器
	open: true,//初次打包完成后，自动打开浏览器
	//指定运行的主机地址
	host: '127.0.0.1',//实时打包所使用的主机地址
	//在http协议中，如果端口号是80，则可以被省略
	port: 80,//实时打包所使用的端口号
}

9.loader

因为webpack默认只能处理.js的模块，其他非.js后缀结尾的模块可以调用loader加载器才可以正常打包

css-loader打包处理.css相关文件

less-loader打包处理.less相关文件

babel-loader打包处理webpack无法处理高级JS语法

9.1css-loader

npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js中配置css-loader

module:{
		rules:[
			//定义了不同模块对应的loader
			{test:/\.css$/,use:['style-loader','css-loader']}
		]
	}

9.2less-loader

npm i less-loader@10.0.1 less@4.1.1 -D

在webpack.config.js中配置less-loader

module:{
		rules:[
			//处理.less文件的loader
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
		]
	}

9.3url-loader

npm i install url-loader@4.1.1 file-loader@6.2.0 -D

在webpack.config.js中配置url-loader

module:{
		rules:[
			//处理图片文件的loader
			//如果需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
			{test:/\.jpg|png|gif$/,use:'url-loader'}
		]
	}

9.4balel-loader

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

?在webpack.config.js中配置babel-loader

module:{
		rules:[	
			//使用babel-loader处理高级的Js语法
			//在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可，一定要排除node_modules目录中JS文件
			//因为第三方包中的JS兼容性，不需要程序员关心
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
		]
	}

配置@babel/plugin-proposal-decorators

在根目录创建babel.config.js文件

module.exports = {
	//声明babel可用插件
	//将来，webpack在调用babel-loader的时候，会先夹在plugins插件来使用
	plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

10.打包发布

"scripts": {
    "dev": "webpack serve",//开发环境中，运行dev命令
	"build": "webpack --mode production"//项目发布中，运行build命令
  }

11.清空上一次执行生成的文件

npm install clean-webpack-plugin -D

生成clean-webpack-plugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

12.带serve和不带serve

12.1带serve生成到内存

12.2不带serve生成到磁盘

13.SourceMap

信息文件，里面存储这位置信息，文件中存储这压缩混淆后，代码在之前的位置

配置SourceMap

devtool: 'eval-source-map'

在webpack.config.js中加入SourceMap????

//在开发调试阶段，建议大家都把devtool的值设置为eval-source-map
devtool: 'eval-source-map'
//在实际发布阶段，建议大家都把devtool的值设置为nosources-sourse-map或直接关闭SourceMap
devtool: 'nosources-sourse-map'


//不推荐，不仅会暴露位置，也会暴露源码
//devtool: 'sourc-map'

????