webpack的基本使用

一、概念

1. webpack的作用

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

2.webpack的核心概念

1. 入口(entry)
2. 输出(output)
3. loader
4. 插件(plugin)
5. 模式(mode)
6. 浏览器兼容性(browser compatibility)
7. 环境(environment)

3.webpack是如何运作的

1. 手动打包一个应用程序
2. 实时创建一个简单打包工具
3. 一个简单打包工具的详细说明

二、入口(entry)

1.入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
2.默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

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

三、输出(output)

1.output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

2.你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js

const path = require('path');

module.exports = {
 entry: './path/to/my/entry/file.js',
output: {
  path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
 },
};
在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

四、loader

1.webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

2.在更高层面，在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require(‘path’);

module.exports = {
 output: {
  filename: 'my-first-webpack.bundle.js',
 },
 module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

五、插件(plugin)

1.loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
2.想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require(‘webpack’); // 用于访问内置插件

module.exports = {
module: {
   rules: [{ test: /\.txt$/, use: 'raw-loader' }],
 },
 plugins: [new HtmlWebpackPlugin({ template: 		'./src/index.html' })],
};

在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。

六、模式(mode)

1.通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
	mode: 'production',
};

七、环境(environment)

Webpack 5 运行于 Node.js v10.13.0+ 的版本。

八、优化

1css 压缩

安装：npm i  css-minimizer-webpack-plugin -D
导入：const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

2.js的压缩

安装：npm i  terser-webpack-plugin -D
导入：const TerserPlugin = require("terser-webpack-plugin");

3.实现压缩与优化

optimization: {
	minimize: true, //默认是压缩
	minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
},

4.代码分割

optimization: {
 splitChunks: {
    chunks: "all", 
  // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}}

九、特殊标识

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

十、目录别名

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

十一、开发工具

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

十二、link与script

<script defer src=""></script>  等待页面内容加载好再去加载js

<link href= “” rel=prefetch>   提前预加载css

十三、webpack中的魔法注释

魔法注释

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

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

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

十四、哈希命名

1 可以控制浏览器的缓存

当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容

2 提供二次加载的速度（有效的控制缓存）

contenthash
	内容发生变化 contenthash值才发送变化
chunkhash
	入口发生变化，当前的文件chunkhashhash会变化
hash
	只要项目内容发送变化，hash就会变化

十五、环境变量

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

2.项目开发中 ，

产品环境 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",
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脚手架

不使用vue脚手架如何搭建项目？

1.安装

1. npm i vue -S

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

2.配置

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

3.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")
	App.vue
<template>
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >