webpack

webpack核心概念

1. 入口entry
   项目运行的起点
   告诉webpack从哪开始打包
2. 出口output
   打包好放入哪
   filename文件名
   path路径
3. 模式mode
   产品模式production
   开发模式development
4. loader加载器
   webpack默认只能加载处理js文件
   loader让webpack拥有处理其他文件的能力
5. 插件plugin
   webpack运行生命周期过程中做一些其他任务
   (压缩，清理)

webpack 配置

默认webpack.config.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处理.css文件style-loader把css加载到style标签内

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

处理文件

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

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

plugin插件

html模板插件
安装:npm i html-webpack-plugin -D
作用作用:生成html模板文件，自动把打包好的js插入到模板文件
在webpack.config.js 导入
const HtmlwebpackPlugin = require(“html-webpack-plugin”)

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

清理dist目录
安装: npm clean-webpack-plugin -D
作用:打包前删除 dist目录

    const {CleanWebpackPlugin} = require("clean-webpack-plugin")
    plugins:[new CleanWebpackPlugin01

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

目录别名

1. 设置@为src目录的别名

   resolve:{
   	alias:{
   		'@':path.resolve(__dirname,'./src')
   		}
   }
   

优化

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()],//压缩器
	splitChunks: { // 代码分割  当js比较小会多个合成1个，当js超过3m一个分割为多个
	    chunks: "all", 
	}
},

开发工具

devtool:“eval-cheap-source-map”
作用：错误与源代码有个一一对应关系(方便查找错误是哪个文件哪一行)

html新增（link与script）

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

webpack中的魔法注释

webpackChunkName:"jquery"：给当前加载的js命名
webpackPrefetch: true：提前预加载js （等网络有空闲的时候）

hash类型

1. hash：只要项目内容发生变化，hash就会发生变化
   2. chunkhash：入口发生变化，当前的文件chunkhash会变化
   3. contenthash：内容发生变化contenthash值才发生变化

环境变量

配置：通过环境命令，产品环境压缩代码，是生产环境不压缩代码，打开devtool
项目开发中，产品环境baseURL http://dida100.com:8888，生产环境baseURLhttp://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==="pruction"?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脚手架

不要vue脚手架如何搭建项目
安装：
npm i vue -S
npm i vue-loader -D处理.vue
npm i vue-template-compiler -D 编译vue目录
npm i vue-style-loader -D vue样式
npm i vue-hot-reload-api -D

配置
导入：const { VueLoaderPlugin } = require(“vue-loader”);
配置：{test: /.vue$/,use: [“vue-loader”], },
插件：plugins: [new VueLoaderPlugin(),]

js
    public/main.html：<div id="app"></div>
    main.js
        import { createApp } from "vue";//导入创建app的方法
        import  App  from "./App.vue";//导入App.vue
        createApp(App).mount("#app");//创建App并挂载

 App.vue
    <template>
<div>
    <h1>你好Vue3</h1>
    <p>你好App</p>
    <p>{{msg}}</p>
</div>
</template>
<script>
export default {
    data(){
        return{
            msg:"文本"
        }
    }
}
</script>