webpack

前言

一、webpack是什么？

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

二、webpack依赖webpack.config.js打包

三、webpack的概念

1.入口(entry)

1. 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
2. 入口的示例代码如下:

module.exports = {
	entry:'./src/index.js',
}

2.出口(output)

1. output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中
2. 出口的示例代码如下

output:{
		path:__dirname+'/dist',// 目录
		filename:'main.js',// 打包好的js文件名称
	},// 出口

3.loader

1. loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
2. 示例代码如下

module：{
reles：[
{"test:/\.css/},loader:['style0loader','css-lader']
]
}
// style-loader把css加载到style标签
// css-loader处理css文件

4.插件(plugins)

1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
2. 示例代码如下

//01安装
npm i html-webpack-liugin
html-webpack-plugin
//把模板html插件打包好的js拷贝到dist目录
clean-webpack-plugin
//清理dist目录
//导入
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
mini-css-extract-plugin
{"test":/\.css/,use:[MiniCssExtractPlugin.loader,'css-loader']},
//把css文件抽出为单独的css文件

css-minimizer-webpack-plugin
//css优化插件
	optimization:{
		minimizer:[
			// 实现优化
			new CssMinimizerWebpackPlugin()
		]
	},

const {CleanWebpackPlugin} = require("clean-webpack-plugin")
//02 导入
const HtmlWebpackPlugin= require('html-webpack-plugin');
//03使用
plugins: [
	    new HtmlWebpackPlugin({template: './public/index.html'})
	  ],
//1

5.模式

1. 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
2. 示例代码如下

mode:'development',// 模式  产品模式,prduction开发模式,development

3. 本地服务器示例代码如下

devServer:{
		  host:"localhost",
		  port:8080,
		  hot:true,
		  open:true
	  }
	  package.json
"scripts": {
    "build": "webpack",
	"serve":"webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  //运行
  npm run serve

6.浏览器缓存的机制

1. 浏览器get请求会缓存
   如果浏览器第二次请求的地址在换岑仲雍就使用缓存
2. webpack hash 缓存
   如果文件没有发生修改,使用一样名称,
   如果文件发生了修改,更改生成的文件名
3. 没有发生更改的文件:缓存
   发生修改的文件:更新

四、报错找不到位置

解决方式

代码如下:

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

五、创建一个Vue的环境

1. 目的

1. 不用vue脚手架,搭建一个vue的运行环境
2. 用webpack来实现vue的脚手架功能

2.需要的插件

1. vue-loader 加载vue
2. vue-template-complier编译vue模板
3. vue-hot-reload-api vue的热更新
4. vue-style-loader 处理vue的css
5. css-loader file-loader url-loader

3.配置需要的命令

1. js压缩工具引入

const TerserWebpackPlugin = require("terser-webpack-plugin")

2. 入口改为:

entry: './src/main.js',

3. 后缀名为.vue的在

rules: [{
				"test": /\.vue/,
				use: ["vue-loader"]
			},

4. 实现优化

minimizer: [
			// 实现优化
			new TerserWebpackPlugin(),
		]

六、webpack优化

 splitChunks: {
			chunks: "all",
		},
//分包
把导入的js单独打包成一个文件,自己写的一个

new CssMinimizerWebpackPlugin(),
			new TerserWebpackPlugin(),
css压缩和js压缩

使用产品环境上线
mode: 'production', // 模式  产品模式:production    开发模式:development

4. // devtool:‘none’,

内部加载
var Home = ()=>{import (xxx.js)}
魔法注释与
component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue')

//treeShake 摇树
//一个模块有3个包,只引用一个包,单独只导入这一个,不需要移除