webpack5 入门学习笔记（一）webpack初体验

写在前面

随着学习进度持续更新。

webpack简介

webpack是什么

定义：

1. webpack 是一种前端资源构建工具
2. 一个静态模块打包器（ module bundler ）

• 在webpack 看来，前端的所有资源文件（ js/json/css/img/less/... ）都会作为模块处理
• 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（ bundle ）

理解：

1. 构建工具：将一系列前端需要进行处理的小工具整合成一个大工具，我们只用关注如何使用就行，这种工具就叫构建工具
2. 静态模块打包器： 以入口文件为起点开始打包，将依赖关系记好形成一个依赖关系图，通过依赖关系图依次引进来形成一个代码块（ chunk ）然后 chunk 进行各种操作按不同的资源进行不同的处理即打包，然后输出一个文件叫 bundle ，模块经过打包之后生成的可以在浏览器直接运行，所以称之为静态模块打包器

webpack的五个核心概念

1. Entry

• 入口（ Entry ）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

2. Output

• 输出（ Output ）指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名

3. Loader

• Loader 让 webpack 能够去处理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript ）

4. Plugins

• 插件（ Plugins ）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境的变量等

5. Mode

• 模式（ Mode ）指示webpack使用相应模式的配置
• 会将 process.env.NODE_ENV 的值设为 development
• 启用 NamedChunksPlugin 和 NameModulesPlugin

选项	描述	特点
development	会将process.env.NODE_ENV的值设为development。 启用NamedChunksPlugin和NameModulesPlugin	能让代码本地调试运行的本地环境
production	会将process.env.NODE_ENV的值设为production。 启用FlagDependencyUsagePlugin, FlagincludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, sideEffectsFlagPlugin和UglifyJsPlugin	能让代码优化上线运行的环境

webpack的初体验

初始化配置

1. 初始化 package.json 注意文件夹命名规范

   	npm init -y
   

2. 下载并安装 webpack

   	npm install webpack webpack-cli -g //全局安装
   	npm install webpack webpack-cli -D //局部安装
   

编译打包应用

运行指令

注意：webpack5 会默认以 ./src/index.js 为入口文件， ./dist为打包输出目录， main.js 为输出文件名，开始打包输出

1. 开发环境指令：

   	webpack  --mode=development
   	npx webpack --mode development //没有全局安装webpack
   

• 功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。整体打包环境，是开发环境

2. 生产环境指令：

    	webpack --mode=production
    	npx webpack --mode production //没有全局安装webpack
   

• 功能：在开发配置功能上多一个功能，压缩代码。整体打包环境，是生产环境。

2. 结论：
   • webpack 能处理 js/json 资源，
   • 生产环境和开发环境将 es6 模块化编译成浏览器能识别的模块化
   • 生产环境比开发环境多一个压缩js代码
3. 问题：
   • 不能编译打包 css、img 等文件
   • 不能将 js 的 es6 基本语法转化为 es5 以下语法。

webpack开发环境的基本配置

创建配置文件

webpack的配置文件

• 创建文件 webpack.config.js
• webpack.config.js 建在项目根目录下，和package.json同级
• 作用：指示 webpack 干哪些活（当运行 webpack 指令时，会加载里面的配置）
• 所有的构建工具都是基于 nodejs 平台运行的，模块化默认采用 common.js
• 项目模块用 ES 配置用 common.js

webpack打包样式资源

• 使用的时候在入口文件中引入样式资源

  	 import './index.css'
  

• webpack.config.js 配置

  要点记录：

  1. {resolve} 拼接绝对路径的方法

     const { resolve } = require('path')
     path:resolve(__dirname,'dist')
     

  2. loader 配置
  3. 不同文件必须配置不同 loader 处理
  4. 匹配哪些文件 test:/\.xxx$/
  5. 使用哪些 loader 进行处理 use:[]
  6. 'style-loader' 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效 下载style-loader
  7. 'css-loader' 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串 下载css-loader
  8. 'less-loader' 将 less 文件编译成 css 文件 下载less-loader和less
  9. mode 指定模式是开发模式还是生产模式 mode:'development' 开发模式

  //resolve用来拼接绝对路径的方法
  const {resolve} = require('path');
  
  module.exports = {
  	//webpack配置
  	//入口起点
  	entry:'./src/index.js',
  	//输出
  	output:{
  		//输出文件名
  		filename:'bundle.js',
  		//输出路径
  		//__dirname nodejs的变量，代表当前文件的目录绝对路径
  		//输出到这个build文件夹中
  		path:resolve(__dirname,'dist')
  	},
  	//loader的配置
  	module:{
  		rules:[
  			//详细loader配置
  			//不同文件必须配置不同loader处理
  			{
  				//匹配哪些文件
  				test:/\.css$/,
  				//使用哪些loader进行处理
  				use:[
  					//创建style标签，将js中的样式资源插入进行，添加到head中生效
  					//下载style-loader
  					'style-loader',
  					//将css文件变成commonjs模块加载js中，里面内容是样式字符串
  					//下载css-loader
  					'css-loader'
  				]
  			},
  			{
  				test:/\.less$/,
  				//使用哪些loader进行处理
  				use:[
  					//创建style标签，将js中的样式资源插入进行，添加到head中生效
  					'style-loader',
  					//将css文件变成commonjs模块加载js中，里面内容是样式字符串
  					'css-loader',
  					//将less文件编译成css文件
  					//需要下载less-loader和less
  					'less-loader'//包统一都在最外面下
  				]
  			}
  		]
  	},
  	//plugins的配置
  	plugins:[
  		//详细plugins的配置
  	],
  	//模式
  	mode:'development',//开发模式
  	//mode:'production'
  };
  

webpack打包html文件资源

• webpack.config.js 配置

• loader：1. 下载 2. 使用（配置 loader ）

• plugins：1. 下载 2. 引入 3. 使用

  要点记录：

  1. plugins 的配置

  2. 插件引入 html 文件 引用 html-webpack-plugin

     const HtmlWebpackPlugin = require('html-webpack-plugin')
     new HtmlWebpackPlugin({template:'./xx/xxx.html'})
     

     功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（ JS/CSS ）

     需求：需要有结构的 html 文件 template:'./src/index.html'

     复制 './src/index.html' 文件，并自动引入打包输出的所有资源（ JS/CSS ）

     注意：不要自己引入这个文件

  const {resolve} = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
  	entry:'./src/index.js',
  	output:{
  		filename:'bundle.js',
  		path:resolve(__dirname,'dist')
  	},
  	module:{
  		rules:[
  			//loader的配置
  			{}
  		]
  	},
  	plugins:[
  		//plugins的配置
  		//html-webpack-plugin
  		//功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
  		//需求：需要有结构的html文件
  		new HtmlWebpackPlugin({
  			//复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）注意不要自己引入这个文件
  			template:'./src/index.html'
  		})
  	],
  	mode:'development'
  };
  

webpack打包图片资源

1. index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <div id="box1"></div>
       <div id="box2"></div>
       <div id="box3"></div>
       <img src="./angular" alt="angular">
   </body>
   </html>
   

2. index.less

   #box1 {
       width: 100px;
       height: 100px;
       background-image: url('./vue.jpg');
       background-repeat: no-repeat;
       background-size: 100% 100%;
   }
   #box2 {
       width: 200px;
       height: 200px;
       background-image: url('./react.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
   }
   #box3 {
       width: 300px;
       height: 300px;
       background-image: url('./angular.jpg');
       background-repeat: no-repeat;
       background-size: 100% 100%;
   }
   img {
     /*只允许缩小不允许放大，依赖于父级容器的尺寸*/
     max-height: 100%;
     max-width: 100%;
   }
   

3. index.js 入口文件

   1. import './index.less'
   2. html 文件由插件引入

4. webpack.config.js

   要点记录：

   1. 要使用多个 loader 处理时用 use:[] ，使用一个 loader 时用 loader: 'xxx-loader'
   2. 处理图片资源时默认使用 url-loader ，但处理不了 html 中的用 <img> 引入的图片
      问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs 解析时会出问题，打包之后 html 文件中引入图片的部分变成 [object Module]
      解决：关闭 url-loader 的 es6 模块化 esModule: false ，使用 commonjs 解析。关闭之后显示的是根据图片内容生成的 hash 值
   3. 处理 html 文件的 img 图片（负责引入 img ，从而能被 url-loader 进行处理
      **下载 html-loader **
   4. 使用 name:'[hash:10].[ext]' 给图片重命名
      [hash:10]：取图片的 hash 值的前十位
      [ext]：取文件原来扩展名
   5. webpack 不会重复打包同一个文件
   6. 通过 limit 对图片大小进行限制， limit: 8 * 1024
      - 图片大小小于8kb，就会被 base64 处理（转化为字符串但是在页面上展示为图片）
      优点：减少请求数量（减轻服务器压力）
      缺点：图片体积会变大（文件请求速度更慢）
      - 一般对8-12kb左右的进行处理
   7. 插件引入 html 文件

       const HtmlWebpackPlugin = require('html-webpack-plugin')
       new HtmlWebpackPlugin({template:'./xx/xxx.html'})
      

   8. {resolve} 拼接绝对路径的方法

      const { resolve } = require('path')
      path:resolve(__dirname,'dist')
      

   9. loader 处理顺序：由下往上，由右往左，所以在配置的时候一定要注意顺序，比如处理 less 文件时 less-loader 一定要在 css-loader 之前

   const { resolve } = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path:resolve(__dirname,'dist')
     },
     module: {
       rlues: [
         {
           test: /\.less$/,
           //要使用多个loader处理用use
           use: [
             'style-loder',
             'css-loader',
             'less-loader'
           ]
         },
         {
           //处理图片资源 
           //默认使用url-loader，处理不了html中的img图片
           test: /\.(jpg|png|gif)$/,
           //使用一个loader
           //下载url-loader 和file-loader
           loader: 'url-loader',
           options: {
             //通过limit对图片大小进行限制
             //图片大小小于8kb，就会被base64处理（转化为字符串但是在页面上展示为图片）
             //优点：减少请求数量（减轻服务器压力）
             //缺点：图片体积会变大（文件请求速度更慢）
             //一般对8-12kb左右的进行处理
             limit: 8 * 1024,
             //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
             //解析时会出问题：打包之后HTML文件中引入图片的部分变成[object Module]
             //解决：关闭url-loader的es6模块化，使用commonjs解析
             //关闭之后显示的是根据图片内容生成的hash值
             esModule: false,
             //给图片进行重命名
             //[hash:10]取图片的hash值的前十位
             //[ext]取文件原来扩展名
             //webpack不会重复打包同一个文件
             name:'[hash:10].[ext]'
           }
         },
         {
           test: /\.html$/,
           //处理html文件的img图片（负责引入img，从而能被url-loader进行处理
           //下载html-loader
           loader:html-loader
         }
       ]
     },
     plugins: [
       new HtmlWebpackPlugin({
           template:'./src/index.html'
         })
     ],
     mode:'development'
   
   };
   

写在后面

学习前端的过程必然是漫长的，但是路总要一步步走，迈开第一步，就会产生一些继续的勇气，在面对困难时会觉得虽难，但不至于就想直接完全放弃，知识当然是无穷尽的，总是一点点学的，不去想一蹴而就的事，虽然走得慢也能稳步前行，对于新学习的这些，要回顾和总结，抵抗遗忘的进程虽然艰辛，但至少还能做记录，这样的方式同样能建立一些信心，就算有万分之一的机会被人看到，即便是自己的笔记，也得是正确的才行。