后端学习webpack笔记

webpack的作用：是一个模块化打包工具,将不同的资源和文件,进行打包,合并在一个文件里。处理js兼容性，性能优化。

npm init -y 快速生成的默认的package.json
//--save-dev（开发模式需要）简写-D  --save（生产环境需要）简写：-S 
//安装 webpack-cli  webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；
//安装jquery
npm install jquery --save
//安装打包自动打开浏览器查看插件
npm install webpack-dev-server@3.11.2 --save-dev
//卸载webpack-dev-server
npm uninstall webpack-dev-server@3.11.2
//安装导出自定义路径html
npm install html-webpack-plugin@5.3.2 --save-dev
//安装打包处理css文件
npm install style-loader@3.0.0 css-loader@5.2.6 --save-dev
npm install style-loader@3.0.0 css-loader@5.2.6 -D
//安装解析打包less文件
npm install less-loader@10.0.1 less@4.1.1 --save-dev
//安装解析打包图片
npm install url-loader@4.1.1 file-loader@6.2.0 --save-dev
//安装每次上线打包自动删除dist旧文件
npm install clean-webpack-plugin -D
//打包模式
npm run build 上线||npm run dev 开发中(要配置package.json的scripts)

1.新建vue-1目录
2.npm init -y 快速生成的默认的package.json

{
  "name": "vue-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.42.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^3.11.2"
  }
}

3.创建webpack.config.js

//导入node.js操作路径模块
const path = require('path');
//自动成内存html
const HtmlPlugin = require('html-webpack-plugin');
//生成只是在内存中，实际没看到
const htmlPlugin = new HtmlPlugin({
	template:'./src/index.html',
	filename:'./index.html'
});
//安装每次上线打包自动删除dist旧文件
const  { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
	//devtool记录生成代码的位置
	//【开发阶段使用】eval-source-map（报错直接显示源码和行号位置）
	//【上线阶段使用】nosources-source-map（报错只显示行号位置）
	devtool:'eval-source-map',
	//development开发模式 -生成js比较大
	//production上线模式，生成js体积小
	mode:'production',//模式
	//打包入口
	entry:path.join(__dirname,'./src/index.js'),
	//打包出口
	output:{
		path:path.join(__dirname,'./dist'),
		//生成文件名
		filename:'js/main.js'
	},
	//插件安装
	plugins:[htmlPlugin,new CleanWebpackPlugin()],
	//开发中打包完成自动打开浏览器
	devServer:{
		open:true,//开关
		port:80,//端口，80的话浏览器自动省略
		host:'127.0.0.1'//主机地址
	},
	//加载器
	module:{
		rules:[
			//定义不同模块的loader
			//css打包模块
			{
				test:/\.css$/,
				use:['style-loader','css-loader']
			},
			//处理less文件
			{
				test:/\.less$/,
				use:['style-loader','css-loader','less-loader']
			},	
			//处理图片limit=zise(B字节)，小于等于limit则被转base64
			//outputPath=images 自动成image文件夹存放图片
			{
				test:/\.jpg|png|gif$/,
				use:'url-loader?limit=4000&outputPath=images'
			}
		]		
	},
	resolve:{
		alias:{
			//定义@符号的路径
			'@':path.join(__dirname,'./src/')
		}
	}
}

4.在vue-1下创建src目录，创建index.js、index.html
index.js:

import $ from 'jquery'
//导入样式 Es6中，一切皆模块
//如果从from接受的值为undfend，则没必要
import '../css/index.css'
import '../css/index.less'
//导入图片，得到图片
import logo from '../img/1.png'
$('.box').attr('src',logo)
import tupian from '../img/2.png'
$('.box2').attr('src',tupian)
import './test/test.js'
$(function(){
	//奇数行变色
	$('li:odd').css('background-color','black')
	$('li:even').css('background-color','pink')
})