小白快速上手webpack

最新推荐文章于 2024-06-16 13:53:38 发布

爱健身的web

最新推荐文章于 2024-06-16 13:53:38 发布

阅读量120

点赞数

分类专栏： Vue css 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/l8023lzy/article/details/128179549

版权

Vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

webpackd的作用：webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具将各种类型资源打包编译为最基础的html、js、css、img等

安装：

npm init -y 创建npm项目 npm install webpack webpack-cli --save-dev 安装webpack以及脚手架

默认配置

原始目录
	index.html
		<script src="./src/index.js"></script>
	src/index.js

webpack目录
	src/index.js
		引入外部模块 
			utils/createButton.js
	dist/index.html
		<script src="./main.js"></script>
	webpack操作
		npx webpack
			npx可以用于本地项目安装的指令工具
			会在package.json同级目录编译生成dist文件夹 存放编译好的main.js

配置需要的文件

package.json同级目录新建webpack.config.js

基本配置
	入口
		entry
			"./src/index.js"
	出口
		output
			filename
				"main.js"
			path
				const path=require("path")
				path.resolve(__dirname, "dist")
			clean:true
				自动清理历史残留

解析路径
	resolve
		配置：resolve:{
        alias:{"@":path.resolve(__dirname, "src")
        }
     }
		导入：import { createButton } from "@/utils/createbutton"
;

npm 自定义指令
	npm run build
		npm webpack

资源加载

webpack默认只能加载js和json资源
	其他资源类型（img/css/vue）需要安装加载器loader

css
	src/assets/css/main.css
	导入
		import "@/assets/css/main.css"
	错误描述
		You may need an appropriate loader to handle this file type
			你需要一个加载器
	安装
		npm install --save-dev style-loader css-loader
	编写规则：    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
	链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader

image
	src/assets/img/smallyellow.gif
	导入
		import smallyellow from "@/assets/img/smallyellow.gif"
	错误描述
		You may need an appropriate loader to handle this file type
			你需要一个加载器
	webpack 5 中，可以使用内置的 Asset Modules
	编写规则： {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
	加载： let img = document.createElement("img");
    			img.src = smallyellow;
    
				document.body.appendChild(img);
				let div = document.createElement("div");
				div.style.width = "400px";
				div.style.height = "227px";
				div.style.backgroundImage = `url(${smallyellow})`;
				document.body.appendChild(div);

加载字体
	src/assets/font/iconfont.css
	src/assets/font/iconfont.ttf
	webpack 5 中，可以使用内置的 Asset Modules
	加载：let cat = document.createElement("span");
			  cat.innerText="分类";
			  cat.classList.add("iconfont", "icon-ico-category")
			  document.body.appendChild(cat);

加载数据
	json
		默认支持
	csv
		npm install --save-dev csv-loader
		配置：  {
                test: /\.(csv|tsv)$/i,
                use: ['csv-loader'],
            },
           
	xml
		npm install --save-dev xml-loader
		配置： {
                test: /\.xml$/i,
                use: ['xml-loader'],
            },

less
	src/assets/css/header.less
	导入
		import "@/css/header.less"
	安装
		npm install less less-loader --save-dev
	编写规则：{test: /\.less$/i,use: [  // compiles Less to CSS  
						'style-loader',
 						'css-loader',              
						'less-loader',
                ],
            },

插件用法

HtmlWebpackPlugin
	html5自动生成并引入bundle包
	安装
		npm install --save-dev html-webpack-plugin
	配置
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		 plugins: [new HtmlWebpackPlugin()],

MiniCssExtractPlugin
	将css从js中剥离
		减少js文件大小
	安装
		npm install --save-dev mini-css-extract-plugin
	配置
		plugins: [new MiniCssExtractPlugin()],
		 use: [MiniCssExtractPlugin.loader, "css-loader"],

CssMinimizerWebpackPlugin
	将css压缩
	安装
		npm install css-minimizer-webpack-plugin --save-dev
	配置：  optimization:{minimizer: [new CssMinimizerPlugin(),
        ],
    },

TerserWebpackPlugin
	webpack5 自带不需要安装
	将html压缩
	配置
		const TerserPlugin = require("terser-webpack-plugin");
		优化器配置： optimization: {minimize: true,  minimizer: 				[newTerserPlugin()],
  },

代码分割

将js文件拆分为多个，以便按需加载

多个js被同时打包
	新建/src/components/header.js 
	 console.log("header入口"
);
	index.js引入
		import "@/components/header.js"
		console.log("header入口"
);

多入口与多出口
	配置多个入口文件：    entry:{index:"@/index.js",        
			header:"@/components/header.js"
    },
		每个入口文件都会被自动引入index.html
		在index.js中不需要在引入header.js
	配置多个出口文件：    output:{filename:"[name].bundle.js",
        path:path.resolve(__dirname, 'dist'),
		clean:true
    },

重复导入
	修改header.js：console.log("header入口");
import { createButton } from "@/utils/createbutton";
createButton("header按钮",()=>{
console.log("点击了header按钮"
);
})

	此时工具模块createButton被同时打包到了index.bundle.js和header.bundle.js
	解决方案
		将createButton作为一个单独模块
		header.js与index.js依赖createButton
		重新配置入口文件：    entry:{  index:{ import:"@/index.js",           
dependOn:["createbutton"]
        },        
		header:{          
		import:"@/components/header.js",            
		dependOn:["createbutton"
]
        },        
		createbutton:{       
		import:"@/utils/createbutton.js"
        }
    },

动态导入
	去除header.js的入口配置：    entry:{  index:{           
import:"@/index.js",           
dependOn:["createbutton"
]
        },
        
// header:{  
//     import:"@/components/header.js",   
//     dependOn:["createbutton"]    
// },
createbutton:{
import:"@/utils/createbutton.js"
        }
    },
	点击首页按钮时创建header

bundle分析
	分析输出结果来检查模块在何处结束
	webpack-chart
		https://alexkuz.github.io/webpack-chart/
		创建生成分析文件指令
			    "profile": "webpack --profile --json > stats.json"

			npm run profile
		用页面打开stats.json

开发环境

开发环境
mode:“development”
source map
代码映射
devtool: ‘inline-source-map’,
开发工具
webpack-dev-server
npm install --save-dev webpack-dev-server
devDerver： devServer:{open:true,host:“192.168.0.10”,port:9090}

使用webpack搭建vue脚手架

1. 新建文件夹 webpack-vue
2.初始化npm项目
	 npm init -y
3.安装webpack工具
	npm install webpack webpack-cli --save-dev
4.安装devServer
	npm install --save-dev webpack-dev-server
5.添加运行指令：    "build": "webpack --mode production","serve": "webpack serve --mode development"

6.根目录新建入口文件
	src/main.js    console.log("项目入口");

	7.wepack配置文件
		webpack.config.js
		const path = require("path")
			module.exports={
				entry:"./src/main.js",
				output:{ filename:"[name].bundle.js",
				path:path.resolve(__dirname, "dist")
   				 }
			}

	8.新建html页面加载bundle
		dist/index.html
		<!DOCTYPE html>

<html lang="en">

<head>

    
<meta charset="UTF-8">

    
<meta http-equiv="X-UA-Compatible" content="IE=edge">

    
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    
<title>Document</title>

</head>

<body>

    
<script src="./main.bundle.js"></script>

</body>

</html>

9.安装vue
	安装版本
		npm install vue

	10.加载vue文件
		main.js  ：console.log("项目入口");
		import { createApp } from "vue"
		import App from "./App.vue"
		createApp(App).mount("#app")
		App.vue
		<template>
    <div @click="count++">
        App: <span >{{count}}</span>
    </div>
</template>  
<script>
    export default{   
		data(){           
		return{  count:10  }

        }

    }

</script>
		安装
			npm install -D vue-loader
		修改配置
			const {VueLoaderPlugin} = require("vue-loader")

			 { test: /\.vue$/i, use: 'vue-loader' }
			new VueLoaderPlugin()
		加载less与css
			css

11.vue-router使用
	安装
		npm install vue-router
	页面修改
		App.vue：
		/src/views/HomeView.vue
		/src/views/AboutView.vue
	新建/src/router/index.js
	main.js引入
12.在根目录新建public/index.html
	安装
		npm install --save-dev html-webpack-plugin
	配置
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		    plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        template:"./public/index.html"
    })
]