webpack

webpack是什么?

webpack 是一种前端资源构建工具,一个静态模块打包器
简单来说：webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(例如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

webpack 五个核心概念

1.entry 入口
指示 webpack 以那个文件为入口起点开始打包,分析构建内部依赖图。
2.output 输出
指示 webpack 打包后文件的名称和位置。
3.loader 加载器
loader:让 webpack 能够去处理那些非 JS 的文件,比如样式文件,图片文件(webpack 自身只理解JS)

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

4.plugins 插件
可以用于执行范围更广的任务.插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等 用与解决loader无法实现的其他事
5.mode 模式
指示 webpack 使用相应的配置(开发环境和生产环境)
development(开发环境):能让代码本地调试运行的环境``
production(生产环境):能让代码优化上线运行的环境

webpack 初始化

• npm init 初始化 package.json
• 下载安装 webpack:
  全局安装: npm i webpack webpack-cli -g
  本地安装: npm i webpack webpack-cli -D

webpack 环境配置

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",// 入口 (webpack 从哪个文件开始运行)
    output: {
        path: __dirname + "/dist",// 目录
        filename: "main-[hash].js",// 打包好的js文件名称
    },
    mode: "development",// 模式 产品模式：production 开发模式：development
    module: {
        // 规则
        rules: [
        // 打包css文件：注意style-loader和css-loader的前后循序不能写错
            { "test": /\.css/, use: ["style-loader", "css-loader"] },
            {
                "test": /\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/,
                use: [
                    {
                        loader: "url-loader", options: {
                            name: "img/[hash].[ext]",
                            // 如果小于10k就打包base64
                            limit: 10240,//如果文件小于3k 转换为base64 代码格式 
                        }
                    }
                ]

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ "template": "./public/index.html" })
    ],
    devServer: {
        host: "localhost",
        port: 8080,
        hot: true,
        open: true,
    }
}

浏览器的缓存机制

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

报错位置提醒
devtool:‘eval-cheap-source-map’,

创建一个Vue环境

1. 目的
   不用vue脚手架,搭建一个vue的运行环境
   用webpack来实现vue的脚手架功能
2. 所需要的插件
   vue-loader 加载vue
   vue-template-complier编译vue模板
   vue-hot-reload-api vue的热更新
   vue-style-loader 处理vue的css
   css-loader file-loader url-loader
3. 配置命令
   js压缩工具引入
   const TerserWebpackPlugin = require(“terser-webpack-plugin”)
   入口更改为
   entry: ‘./src/main.js’,
   更改 后缀名为.vue的

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

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

webpack 优化

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

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

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

// devtool:‘none’,

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

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