webpack基础

官网网址

https://www.webpackjs.com/concepts/

概念

1.webpack是一个前端打包工具.
2.用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件F插件需要A插件)生成浏览器可以识别静态资源
3. Vue前期脚手架就是用webpack制作(Vue开始推荐vite构建工具(更快) )react脚手架 angular等现代框架脚手架都是依赖webpack

webpack核心概念

入口(entry)

	项目运行的起点
	告诉webpack从哪开始打包

单个入口（简写）语法

//webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

输出(output)

	打包好放入哪
	filename文件名
	path路径

loader

	webpack默认只能加载处理js文件，loader让webpack拥有处理其他文件的能力

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

插件(plugin)

	webpack运行生命周期过程中做一些其 他任务 (压缩，清理)

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

模式(mode)

	//产品模式 production
		// webpack.development.config.js
			module.exports = {
			  mode: 'production',
			};
	//开发模式 development
		// webpack.custom.config.js
			module.exports = {
			  mode: 'development',
			};

浏览器兼容性(browser compatibility)

环境(environment)

创建

webpack配置

默认webpack.onfig.js配置文件中

devServer

安装: npm i webpack-dev-server -D
作用:开启一个本地服务器
open:true 是否自动打开浏览器
host:"localhost"  域名
port:8080 端口号
hot:true    更新 (文件保存，网页自动更新)
package.json
    script: ("serve": "webpack serve")
    npm run serve运行项目

loader加载器

css处理

    安装: npm i css-loader style-loader -D
    作用: css-loader 处理.ss文件style loader把css加载到style标签内

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

处理文件（图片，文件）

安装：npm i file-loader url-loader -D
作用：加载图片和文件

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

plugin插件

html模板插件

安装：npm i html-webpack-plugin -D
作用：生成html模板文件，自动打包好的js插入到模板文件
在webpack.configjs导入  const HtmIWebpackPlugin= require("html-webpack plugin")

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

清理dist目录

安装: npm clean-webpack plugin -D
作用:打包前删除dist目录
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
plugins:[new CleanWebpackPlugin()]

特殊标记

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

开发工具

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

link与script

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

webpack中的魔法注释

1.魔法注释

 import(/* webpackChunkName:"jquery" , webpackPrefetch:true */ "jquery").then(({defaul:$})=>{
 console.log($);
 })

/*webpackChunkName:"jquery" */
给当前的js文件命名

/*webpackPrefetch: true */
// 网络有空闲预加载js

哈希命名

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

环境变量

一、

配置:通过环境命令 产品环境压缩代码，是生产环境不压缩代码，打开devtool

二、

项目开发中，产品环境baseURL http://dida1 00.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",
3. webpack.config.js使用
 mode:process.env.NODE_ENV,
 devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',


4. 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脚手架如何创建项目

安装

npm i vue -S

npm i vue-loader -D //处理.vue
vue-template-compiler -D //编译vue目录
vue-hot-reload-api -D //热更新
vue-style-loader -D //处理vue 样式

配置

01导入
 const {VueLoaderPlugin} = require("vue-loader")
02配置
 {test:/\.vue$/,use:["vue-loader"]}
03插件
 plugins:[new VueLoaderPlugin()]

js

1.模板文件 public/main.html
	<div id="app"></div>

2.main.js
	import {createApp } from 'vue';
    //导入App.vue
    import App from './App.vue': .
    console.log(App);
 3.//创建App并挂载
 createApp(App).mount("#app")
4.App.vue
<template>
<div>
      <h1>你好Vue3</h1>
 </div>
</template >