webpack 基础打包笔记

最新推荐文章于 2024-08-30 22:42:26 发布

偏到鸳鸯两字冰

最新推荐文章于 2024-08-30 22:42:26 发布

阅读量653

点赞数 3

文章标签： webpack javascript 前端 node.js

本文链接：https://blog.csdn.net/nlq12345/article/details/122196836

版权

本质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。

当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

安装

md mypack
//新建文件夹

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

//本地安装
npm install --save-dev webpack
npm install --save-dev webpack-cli

准备文件

-- dist 文件生成目录
---- index.html 

-- index.js 主入口文件
-- header.js 需要被index引入的文件


#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->


#  index.js
import {header} from './header.js'
document.body.append(header);


#  header.js
var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

使用配置文件

在项目目录新建一个webpack.config.js webpack默认配置文件

const path = require('path')
// 引入node的 path路径模块

module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}
// module.export node中导出模块的意思

# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

核心概念：入口 entry、输出 output、mode 模式、loader 加载器、plugins 插件

输出output:

{
path:__dirname+"/dist",
filename:"main.js"
}

mode模式:

mode: "development", //开发模式
mode: "production", //产品模式

loader加载器：

定义：让webpack拥有处理非js的文件

style-loader：把css插入到style标签、css-loader：加载css

安装：

npm i style-loader css-loader -D

配置文件：

// 模块
	module:{
		// 规则
		rules:[
			{
			//测试.css文件结尾
			test:/\.css$/,
			// 使用两个loader加载器
			use:["style-loader","css-loader"],
			
			}
		]
	}

plugins插件：

定义：处理内容外在webpack处理过程中额外操作，加载模板，压缩，服务器。。。。

1、html-webpack-plugin:

把html模板文件加载到dist目录，并插入打包好的js

安装：

npm i html-webpack-plugin

配置：

const htmlWebpackPlugin = require("html-webpack-plugin")

plugins:[
    new htmlWebpackPlugin({
        template:"./public/index.html"
     })
]

2、 file-loader: 加载文件
url-loader：基于file-loader 如果文件比较小转成base64格式减少http请求的次数

安装：

npm i file-loader url-loader -D

3、clean-webpack-plugin：清理 dist 目录

安装:

npm i clean-webpack-plugin -D

4、optimize-css-assets-webpack-plugin：优化css插件

安装：

npm i optimize-css-assets-webpack-plug -D

导入：

const optimizeCss = require('optimize-css-assets-webpack-plugin')

使用：

// 优化选项
	optimization: {
		// 压缩
	    minimizer: [ new optimizeCss()],
	},

5、mini-css-extract-plugin: 把css文件抽出为一个单独.css文件

安装：

npm i mini-css-extract-plugin -D

导入：

const miniCssExtractPlugin=require('mini-css-extract-plugin')

使用loader：

use:[miniCssExtractPlugin.loader,"css-loader"],

使用插件：

new miniCssExtractPlugin({
			filename:"style-[hash:7].css"
		})

6、optimize-css-assets-webpack-plugin： css优化

terser-webpack-plugin：js压缩优化

安装：

npm i optimize-css-assets-webpack-plugin -D
npm i  terser-webpack-plugin -D

导入：

// 使用css优化插件
const optimizeCss = require('optimize-css-assets-webpack-plugin')
// 把css单独抽出为一个文件
const miniCssExtractPlugin=require('mini-css-extract-plugin')
// 导入js压缩插件
const TerserPlugin = require("terser-webpack-plugin");

使用：

// 优化选项
    optimization: {
        // 压缩
        minimize: true,
        // 指定压缩器
        minimizer: [ 
            new optimizeCss(),
            new TerserPlugin()
            ],
    },

本地服务器

作用：本地启动一个服务器

安装：

npm i webpack-dev-server

配置：

devServer:{
		open:true,//自动打开浏览器
		hot:true,//热更新
		host:"localhost",//本地域名
		port:8080,//端口号
		proxy:{}//同vue.config.js 里面的代理配置
	}

package.json

script
"serve":"webpack server",

启动命令：

npm run serve

webpack优化

1、hash哈希：

内容相同，文件名称也就相同，如果浏览器已经请求过同样的名称，浏览器二次请求会从缓存里面取

hash 打包的变化算出一段字符
contentHash 内容内容变化算出一段字符
chunkHash 根据入口文件算出一段字符串

2、压缩：

压缩css： optimize-css-assets-webpack-plug
压缩js： terser-webpack-plugin

3、分割：

大文件拆分：

optimization: {
		// 代码分割
		splitChunks: {
		    chunks: "all", 
		},
}
filename:'[name]-[hash:7].js'

4、soureMap：

源代码对应关系（出错）

devtool:'eval-cheap-source-map',

5、treeShake功能，摇树功能

作用：没有用的模块不导入

optimization: {
		usedExports: true,
}

//package.json 配置哪些文件不被摇掉
"sideEffects":["@babel/polly-fill","*.css"],

6、异步加载

pic.onclick = function(){
	import(/* webpackChunkName:"jquery", webpackPrefetch: true*/"jquery")
	.then(({default:$})=>{
		// jq加载完毕，单击红色，显示其文本
		$(".red").click(function(){
			alert($(this).text())
		})
	})
}

7、预加载 prefetch

import(/* webpackChunkName:"jquery", webpackPrefetch: true*/"jquery")

webpack魔法注释：
/* webpackChunkName:"jquery"*/ 导入的文件打包后的名称
/*webpackPrefetch: true*/ 当网络有空闲的时候提前下载该文件

8、按需导入

@babel/plugin-syntax-dynamic-importvue，element-ui 按需下载都需要

配置 babelrc plugins：

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins":["@babel/plugin-syntax-dynamic-import"]
 }

多入口打包

1. 配置入口

entry:{
        "vue":"./src/main.js",
        "base":"./src/index.js"
    },

2. 配置 html-webpack-plugin

new htmlWebpackPlugin({
            // 指定模板地址
            template:"./public/index.html",
            // 哪些入口文件生成js插入到当前模板
            chunks:["vue"],
            // 传入模板的标题参数
            title: 'vue-webpack',
            // 打包生成文件名称
            filename: 'index.html'
        }),
        new htmlWebpackPlugin({
            // 指定模板地址
            template:"./public/base.html",
             chunks:["base"],
             title: '基础webpack',
              filename: 'base.html'
        }),