webpack总结

webpack的网址:概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网

1:webpack是什么?

概念

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

2：webpack的核心概念:

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着 高度可配置性，可以很好满足你的需求。

在开始前你需要先理解一些核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)

本文档旨在给出这些概念的高度概述，同时提供具体概念的详尽相关用例的链接。

为了更好地理解模块打包工具背后的理念，以及在底层它们是如何运作的，请参考以下资源：

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

入口(entry)

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

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

webpack.config.js

module.exports={
	entry:"./src/index.js",//入口
	},

输出(output)

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

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

webpack.config.js

module.exports={
	entry:"./src/index.js",//入口
	output:{//出口
		filename:"main-[hash].js",//文件名
		path:__dirname +"/dist"//文件夹 __dirname 当前目录
	},

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

loader：加载器

css处理：

安装：npm i class-loader style-loader -D

作用：class-loader处理.css文件 style-loader把css加载到style标签

module:{
		rules:[
			//当文件名test通过，使用如下插件
			{test:/\.css$/,use:["style-loader","css-loader"]}
		]
	},

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

Warning

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

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

1. test 属性，识别出哪些文件会被转换。
2. 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' }],
  },
};

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。

处理文件（图片 文件）

1.安装：npm i file-loader url-loader -D

2.作用: 加载图片和文件

3.

{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
			use:[{
				loader:"url-loader",//使用url加载器
				options:{limit:5000,name:"images/[hash].[ext]"},
				//选项,当图片小于5000文节时候，转换base64 (小图片减少一次http请求)
				//文件命名 images文件夹 hash值 (计算出图片的名称) ext后缀名
			}]
			}

插件(plugin)

1.html模板插件:

2.安装：npm i html-webpack-plugin -D

3.作用:生成html模板文件，自动把打包好的js插件插入到模板文件

在webpack.config .js 导入     const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[
		//实例化插件，指定template模板的位置
		new HtmlWebpackPlugin({
			template:"./public/index.html"
		})
	],

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源

管理，注入环境变量。

Tip

查看 插件接口(plugin interface)，学习如何使用它来扩展 webpack 能力。

想要使用一个插件，你只需要 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 注入到此文件中。

清理dist目录：

1.安装:npm i clean-webpack-plugin -D

2.作用：打包前删除dist目录

3.

 4.

抽出插件:

1.安装:npm i mini-css-extract-plugin -D

2.作用：把css抽出一个单独的文件

3.导入：

// 导入css 抽出插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

4.配置loader:{
                test: /\.css$/,
                use: [  MiniCssExtractPlugin.loader, "css-loader"]
            },

5.实例化插件:     new MiniCssExtractPlugin()

优化：

1.css压缩

安装:npm i css-minimizer-webpack-plugin -D

2.导入:

 

3.js压缩：

安装:npm i terser-webpack-plugin -D

导入:

 4.实现压缩与优化：

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

5.代码分割：

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

devServer

1.安装:npm i webpack-dev-serve -D

2.作用：开启一个本地服务器。

3.open:true是否自动打开浏览器

4.host：“localhost”；域名

4.port：8080//端口号

5.hot:true  更新(文件保存，网页自动更新)

 6.package.json:

 7.运行项目:

npm run serve

打包指令:npm run build

特殊标识：

1.[hash] 把内容通过hash算法算出来的一串字符.

2.[hash:7] 取hash字符串前7个.

3.[name] 源文件名称.

4.[ext] 文件的后缀名

目录别名:

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

开发工具：

1.

 2.作用:错误与源代码有一个一一对应关系。

link与script：

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

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

webpack中的魔法注释：

2.给当前的js文件命名：

 webpackChunkName:"jquery"

 

3.网络有空闲预加载js：

  webpackPrefetch: true

 哈希命名的作用：

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

2.可以提供二次加载的速度(有效的控制缓存)

3.contenthash:内容发生变化 contenthash值才发送变化

4.chunkhash：入口发生变化，当前的文件chunkhashhash会变化

5.hash：只要项目内容发送变化，hash就会变化

 

配置（Configuration）

你可能已经注意到，很少有 webpack 配置看起来完全相同。这是因为 webpack 的配置文件是 JavaScript 文件，文件内导出了一个 webpack 配置的对象。 webpack 会根据该配置定义的属性进行处理。

由于 webpack 遵循 CommonJS 模块规范，因此，你可以在配置中使用：

• 通过 require(...) 引入其他文件
• 通过 require(...) 使用 npm 下载的工具函数
• 使用 JavaScript 控制流表达式，例如 ?: 操作符
• 对 value 使用常量或变量赋值
• 编写并执行函数，生成部分配置

请在合适的场景，使用这些功能。

虽然技术上可行，但还是应避免如下操作：

• 当使用 webpack CLI 工具时，访问 CLI 参数（应编写自己的 CLI 工具替代，或者使用 --env）
• 导出不确定的结果（两次调用 webpack 应产生相同的输出文件）
• 编写超长的配置（应将配置文件拆分成多个

基本配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

环境变量

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

1.项目开发中，产品环境：

 

2.安装:npm i cross-env -D

3.package.json传参：

"build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve",

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);

想要消除 webpack.config.js 在 开发环境 和 生产环境 之间的差异，你可能需要环境变量(environment variable)。

Tip

webpack 环境变量，与操作系统中的 bash 和 CMD.exe 这些 shell 环境变量 不同。

webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env production 或 --env goal=local。

npx webpack --env goal=local --env production --progress

Tip

如果设置 env 变量，却没有赋值，--env production 默认表示将 env.production 设置为 true。还有许多其他可以使用的语法。更多详细信息，请查看 webpack CLI 文档。

对于我们的 webpack 配置，有一个必须要修改之处。通常，module.exports 指向配置对象。要使用 env 变量，你必须将 module.exports 转换成一个函数：

webpack.config.js：

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

vue脚手架:

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

2.安装:npm i vue -S

处理.vue:  nmp i  vue-loader -D

变异vue目录:npm i vue-template-commpliter -D

热更新：npm  i vue-hot-reload-api -D

处理vue样式: npm i vue-style-loader -D

配置:

01 导入
const {VueLoaderPlugin}  =  require("vue-loader")

02 配置
{test:/\.vue$/,use:["vue-loader"]}

03 插件
plugins:[new VueLoaderPlugin()]

模板文件：
plugins:[new VueLoaderPlugin()]

js文件：

main.js
import { createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);

// 创建App并挂载
createApp(App).mount("#app")

创建App.vue :

实例：

总结结束！！！