webpack

m0_64366317

已于 2022-11-23 21:25:54 修改

阅读量144

点赞数

文章标签： webpack javascript 前端

于 2022-11-22 21:14:08 首次发布

本文链接：https://blog.csdn.net/m0_64366317/article/details/127989573

版权

为什么要使用webpack

浏览器不支持less sass语法(缺乏样式编译功能)
不支持es6/es7(缺乏babel编译功能，把es6转成es5)
开发的时候要是我们修改一下代码保存之后浏览器就自动更新就好了(缺乏热更新功能)
本地请求远程接口会产生跨域问题(缺乏请求代理功能)
项目要上线了，要是能一键压缩代码啊图片什么的就好了（缺乏自动压缩打包功能）

webpack的核心概念

webpack

入口entry
项目运行的起点告诉webpack从哪开始打包
出口output
打包好放入哪
filename 文件名
path 路径
模式mode
产品模式
production
开发模式
development
loader加载器
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件plugin
webpack运行生命周期过程中做一些其他任务
（压缩，清理）

使用

创建项目
npm init 初始化项目
npm i webpack webpack-cli -D //写入到package.json的开发依赖中
npx webpack 打包

配置

基本配置

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

loader

css处理

npm i css-loader style-loader -D
在 webpack.config.js 文件中指定 loader。

module:{  
rules:[                                                                                                 		    
   {test:/\.css$/,
   use:["style-loader","css-loader"]}          
      ]        
     }

图片处理

npm i file-loader url-loader -D
在 webpack.config.js 文件中指定 loader

       {test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
           use:[{
            loader:"url-loader",
            options:{limit:5000,name:'images/[hash].[ext]'}
           }]
        },

在这里插入图片描述

处理sass

安装： npm i sass sass-loader -D
处理scss文件
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}

plugin插件

html模板

安装npm i html-webpack-plugin -D
作用：生成html模板文件，自动把打包好的js插入到模板文件
在webpack.confing.js导入

清理dist目录

安装npm i clean-webpack-plugin -D
作用：打包前删除dist目录

抽出插件

安装： npm i mini-css-extract-plugin -D
作用：把css抽出为一个单独的文件
导入： const MiniCssExtractPlugin = require("mini-css-extract-plugin")
配置loader
	{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
实例化插件
	new  MiniCssExtractPlugin()

devServe

安装 npm i webpack-dev-serve -D
作用：开启一个本地服务器
webpack.config.js
package.json

优化

css 压缩
安装：npm i css-minimizer-webpack-plugin -D
导入：const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”);
js的压缩
安装：npm i terser-webpack-plugin -D
导入：const TerserPlugin = require(“terser-webpack-plugin”);
-实现压缩与优化
optimization: {
minimize: true, //默认是压缩
minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
},
代码分割
optimization: {
splitChunks: {
chunks: “all”,
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}

特殊标识

[hash] 把内容通过hash算法算出来的一串字符
[hash:7] 取hash字符串前7个
[name] 原文件名称
[ext] 文件的后缀名

目录别名

resolve: {
 // 别名：@代表是 src目录
alias: {
     '@': path.resolve(__dirname, './src'),
 }
    },

开发工具

devtool:“eval-cheap-source-map”,
作用，错误与源代码有个一一对应关系

link与script

< script defer src=“”>
等待页面内容加载好再去加载js
< link href= “” rel=prefetch>
提前预加载css

webpack中的魔法注释

魔法注释
import(/* webpackChunkName:“jquery” , webpackPrefetch: true */ “jquery”).then(({default: $KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲)=>{ console\dots$ );
})
/* webpackChunkName:“jquery” */
给当前的js 文件命名
/* webpackPrefetch: true */
网络有空闲预加载js

哈希命名

01 可以控制浏览器的缓存
当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
02 提供二次加载的速度（有效的控制缓存）
contenthash
内容发生变化 contenthash值才发送变化
chunkhash
入口发生变化，当前的文件chunkhashhash会变化
hash
只要项目内容发送变化，hash就会变化

环境变量

配置：通过环境命令产品环境压缩代码，是生产环境不压缩代码，打开devtool
项目开发中，产品环境 baseURL http://dida100.com:8888
生产环境 baseURL http://localhost:8080
1.npm i cross-env -D
2.package.json 传参
“build”: “cross-env NODE_ENV=production webpack”,
“serve”: “cross-env NODE_ENV=development webpack serve”,
1. webpack.config.js使用
  mode:process.env.NODE_ENV,
  devtool:process.env.NODE_ENV===“production”?false:‘eval-cheap-source-map’,
1. js文件中使用
  var baseURL = “”;
  if(process.env.NODE_ENV==“production”){
  baseURL = “http://dida100.com”;
  }else{
  baseURL = “http://localhost”
  }
  console.log(“当前环境：”,process.env.NODE_ENV,baseURL);

vue脚手架

不要vue脚手架如何搭建项目？
安装
npm i vue -S
npm i
- vue-loader
  处理.vue
- vue-template-compiler
  编译vue目录
- vue-hot-reload-api
  热更新
- vue-style-loader
  处理vue 样式
配置
- 01 导入
  const {VueLoaderPlugin} = require(“vue-loader”)
- 02 配置
  {test:/.vue$/,use:[“vue-loader”]}
- 03 插件
  plugins:[new VueLoaderPlugin()]
js
- 模板文件 public/main.html
  < div id=“app”>
- main.js
  import { createApp } from ‘vue’;
  // 导入App.vue
  import App from ‘./App.vue’;
  console.log(App);
  // 创建App并挂载
  createApp(App).mount(“#app”)
- App.vue
  < template >
  < div>
  < h1>你好Vue3
  < /div>
  < /template >