Webpack - 从基础到实战手把手带你掌握新版Webpack4.0 - 学习笔记

Xxxxxl17

已于 2023-02-23 17:22:10 修改

阅读量1.9k

点赞数

分类专栏： webpack 文章标签：前端 webpack

于 2022-05-19 08:39:22 首次发布

本文链接：https://blog.csdn.net/Xxxxxl17/article/details/124855661

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

边学习边唠叨才好啊

2022.05.19 Thu: 收藏从未停止，想法从未开始，咋办呢，不想了呗，还能咋办呀=,=~
2022.05.20 Fri: 都5.20了，what are u doing？
只学了一章，学不动了，先这样吧，不能再多了。
2022.05.21 Sat: 外出了一个白天晚上回来太累了，不小心扛着电脑在床上睡着了哈哈哈
2022.05.22 Sun：美好的一天从早晨开始hh~~昨晚不小心睡着睡得真香
2022.05.23 Mon：抖音使我着迷，今天不想打字，只想看视频
2022.05.29 Sun：都周末了学啥习呀好好玩，非周末学习才好啊
2022.05.31 Tue：giao，气死我了，心里默读三遍“还好还好还好”，，，
2022.06.01 Web：六一到了，又是俺滴节日。
2022.06.02 Thur: 又说刷完视频回去写笔记，结果打了游戏
2022.06.05 Sun：2天没看学习啦，甚是想念。
2022.06.06 Mon：又说昨晚学习，二刷知否一口气从第一集刷到70+集。不过真的好好看呀。和五年前看的感觉又不太一样了哈哈哈哈
2022.06.07 Tue：昨夜雨疏风骤，浓睡不消残酒，试问卷帘人却道海棠依旧，知否知否应是绿肥红瘦~ 好上头
2022.06.12 Sun：蜗牛又回来了。租完新房子有了新感受：有人看海，有人被爱，有人租房到现在。==
2022.07.03 Sun：蜗牛又回来了。我不会放弃你的！
2022.07.04 Mon：看到了第五章，笔记才写到第三章，什么乌龟速度=,=不行，太慢了，俺要在23岁之前写完，不然俺不仅是乌龟还是dog，555梦华录大结局还没看
2022.09.04 Sun：朋友们，🐢回来了。

第1章课程导学（打消你的学习疑虑）

在这里插入图片描述

第2章 Webpack 初探

2-1 webpack 究竟是什么？

总结：
面向过程vs面向对象
初识webpack，webpack貌似是一个js的编译器(太高评价啦,只是翻译export/import等)，将js翻译成浏览器可以识别的语言(比如：浏览器识别不了export/import这种语法)。

npm init //初识化包管理器，生成package.json文件
npm install webpack webpack-cli
npx webpack index.js //编译index.js,生成./dist/main.js文件

在这里插入图片描述

2-2 什么是模块打包工具？

1.webpack是什么？
webpack是模块打包工具，并不是js的翻译器，因为他只能认识一些简单的import语法，别的识别不了，模块打包的意思是把所有的引入的模块（Moudule）引入到一起，生成一个最终的js文件，模块常见的几种规范：ES Moudule ,CommonJS,CMD,AMD

2.webpack的发展历史
最开始webpack是打包js的，随着版本的发展，现在可以打包任何常见类型的文件了

3.阅读webpack官方文档
Dell老师说要阅读英文版的，是最新的qaqqaqqaq
（1）concepts学习moudule会对模块化有基本的认识
（2）api的moudule

2-3 Webpack的正确安装方式

使用稳定的最新版本的node
在项目中安装webpack，不要全局安装！不同项目的webpack版本可能不一样，全局安装会导致有的项目有问题。

// npm init生成package.json
在这里插入图片描述

//1 在项目中安装webpack
npm install webpack webpack-cli --save-dev
// 等价
npm install webpack webpack-cli -D

//2 在项目中查看webpack版本
npx webpack -v 
//npx这个命令会去node_modules/webpack中去找

2-4 使用Webpack的配置文件

webpack会有自己默认的打包配置。一般使用起来，咱们需要自定义：

// webpack.config.js
在这里插入图片描述
entry: 入口文件路径
output: 打包输出的位置

在这里插入图片描述

// 命令随配置变化，但是归根都是运行1
webpack index.js //1
npx webpack index.js// 2
npm run bundle -> webpack // 3

课后作业（看文档，其实就是课上讲过的内容）：
https://v4.webpack.js.org/guides/getting-started/#root

2-5 浅析Webpack打包输出内容

// package.json
“scripts”: {
“bundle”: “webpack”
},
// 执行npm run bundle，控制台输出如下：

在这里插入图片描述
其中，
hash: 本次打包唯一的一个hash
version: webpack的版本信息
time: 打包所消耗的时间
Asset: 打包的文件名
size: 文件的大小
chunks: 文件入口的唯一id，复杂项目的打包可能有多个id
chunk Names: 文件入口的名字，相当于entry中的main
entryPoint main=bundle.js 打包的入口文件以及下面列出的都打包了哪些文件

打包的两种模式mode

mode: 'development'
mode: 'production'//(打包代码被压缩)

第3章 Webpack的核心概念

3-1 什么是loader

当在项目中引用的不是js文件(webpack默认知道如何打包js文件)，这个时候就需要使用loader啦~loader会告诉webpack如何打包其他非.js后缀的文件。

import avatar from './avatar.jpg'
import Header from './components/Header.vue'

// webpack.config.js

  module: {
    rules: [
	{
		test: /\.jpg$/,
      	use: {
      	//webpack默认只会打包js文件，其他文件需要告诉webpack
          loader: 'file-loader',
    	},
    },
	{
		test: /\.vue$/,
      	use: {
          loader: 'vue-loader',
    	},
    },    
    ]

3-2 使用Loader打包静态资源（图片篇）

url-loader较于file-loader的优点：
file-loader和url-loader都可以打包图片，file-loader打包jpg图片会打包一个jpg文件出来，url-loader可以配置limit参数(单位：字节)。当图片文件比较小，没必要单独发一个http请求，会把图片文件打包成base64数据合到总的打包文件(举例: bundle.js)里；当图片超过limit值，此时图片比较大，会另外独立打包一个文件，这样会减小bundle.js的体积大小，让页面快速地展现出来，减少白屏时间。

// webpack.config.js

  module: {
    rules: [
	{
		test: /\.jpg$/,
      	use: {
          loader: 'url-loader',
          options: {
//配置打包后文件的名称：placeholder-占位符（ ext(后缀(jpg之类)) )
	          name: '[name]_[hash].[ext]',
//会打包到dist/images文件夹里面
	          outputPath: 'images/',
	          limit: 10240,
          },
    	},
    }, 
    ]

3-3 使用Loader打包静态资源（样式篇 - 上）

import './index.css' from ''

// webpack.config.js

  module: {
    rules: [
	  {
	      test: /\.scss$/,
	      use: [
	        'style-loader',
	        {
	          loader: 'css-loader',
	          options: {
	            importLoaders: 2,
	          },
	        },
	        'sass-loader',
	        'postcss-loader',
	      ],
      }, 
    ]
 }

//postcss.config.js

module.exports = {
  plugins: [
  	require('autoprefixer'),
  ],
};

loader是从下到上、从右到左的执行方式。

postcss-loader: 打包自动添加厂商前缀。(一般写css3新特性要加厂商前缀，自己写的话要写多个。使用loader的话，css只写了transform: translate(100px, 100px)，使用Chrome浏览器会自动加上：-webkit-transform)
css-loader：把使用到的从各方引进的css提出来进行处理
style-loader：把处理好的css挂载到页面的元素style上面

3-4 使用Loader打包静态资源（样式篇 - 下）

1.样式文件中引用另一个样式文件问题 – 查询参数 importLoaders，用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。

当在 [.js] 文件里面引用 [.scss] 文件 import './index.scss' ,webpack打包会依次test postcss-loader->sass-loader->style-loader；

然而，在一个样式文件里面import另一个样式文件时 ([.scss]文件中@import './avatar.scss')，这个时候webpack不会test postcss-loader->sass-loader了，而是直接test style-loader。

此时，需要配置importLoaders，这样也会依次test postcss-loader->sass-loader->style-loader
。在这里插入图片描述

2.css打包模块化（避免全局引入）

在这里插入图片描述

3.打包字体文件
// webpack.config.js

  module: {
    rules: [
		{
	      test: /\.(eot|ttf|svg)$/,
	      use: {
	        loader: 'file-loader',
	      },
	    }
	]

要看文档：
①guides里面的Asset Management(全部阅读)
https://v4.webpack.js.org/guides/
②LOADERS里面的style-loader、css-loader、sass-loader、postcss-loader
https://v4.webpack.js.org/loaders/

3-5 使用 plugins 让打包更便捷

plugin：中文翻译就是插件。可以在webpack运行到某个时刻的时候，帮你做一些事情。

1.htmlWebpackPlugin插件(webpack官方)

htmlWebpackPlugin 会在打包结束后，自动生成一个html文件(输出的/dist目录下)，并把打包生成的js自动引入到这个html文件中。

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
  	template: 'src/index.html'//指定以哪个文件作为模板文件(如果不指定，则会打包生成一个默认的不附带其他内容的html文件)
  })],
};

在这里插入图片描述
①htmlWebpackPlugin生成的html以 src/index.html 为模板生成；②打包的main.js注入到 html中；③访问dist/index.html

2.clean-webpack-plugin(第三方插件)

时刻：在打包之前开始运行
作用：删除之前打包的文件夹目录（默认删除output下psth指定的目录）
安装：npm install --save-dev clean-webpack-plugin

const path = require('path');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [
    // newCleanWebpackPlugin(['dist'], {root: path.resolve(__dirname, '../')})
    //若不配置，默认删除output下psth指定的目录
  	newCleanWebpackPlugin(['dist'], {root: path.resolve(__dirname, 'dist')})
  ],
};

3-6 Entry 与 Output 的基础配置

1.打包单个文件
// webpack.config.js

const path = require('path');
module.exports = {
//entry: './src/index.js',//简写方式
	entry: {
		main: './src/index.js'
	},
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist')
	}
}

2.打包多个文件
// webpack.config.js

const path = require('path');
module.exports = {
//entry: './src/index.js',//简写方式
	entry: {
		main: './src/index.js',
		sub: './src/index.js'
	},
	output: {
		publicPath: 'http://cdn.com.cn',//打包生成的js文件需要放到xx后台地址上
		filename: '[name].js',//name即entry配置中需要打包文件的key
		path: path.resolve(__dirname, 'dist')
	}
}

在这里插入图片描述

过一遍：https://v4.webpack.js.org/configuration/output/
在这里插入图片描述

简单看下：https://v4.webpack.js.org/configuration/entry-context/

重点(仔细阅读)：https://v4.webpack.js.org/guides/output-management/

仔细阅读这个plugin：
https://v4.webpack.js.org/plugins/html-webpack-plugin/
https://github.com/jantimon/html-webpack-plugin#configuration

建议：HtmlWebpackPlugin - Configuration

3-7 SourceMap 的配置

SourceMap解决的问题：如果打包生成的代码出错的话，我们可以知道打包生成的代码哪里出错了，但是并不能知道原来的代码哪里出错了。所以我们使用SourceMap做一个源代码和打包生成的代码的一个映射。

// webpack.config.js

module.exports = {
	devtool: 'source-map',
	// devtool: 'cheap-module-eval-source-map', //常用于开发环境(development)
	// devtool: 'cheap-module-source-map', //常用于生产环境(production)
}

在这里插入图片描述
eval: 执行速度最快,性能最好,但是对于复杂的代码提示信息可能相对于没有那么全面

必读：https://v4.webpack.js.org/configuration/devtool/#devtool

https://v4.webpack.js.org/guides/development/#using-source-maps

面试经常问的一个问题：Sourcemap的原理

3-8 使用 WebpackDevServer 提升开发效率

想要实现：修改了代码，无需重新手动打包就可以在页面上更新展示出来。
有3种方法：
1.–watch(不用重新打包，但要手动刷新页面)
// package.json

{
	"scripts": {
		"watch": "webpack --watch"
	}
}

执行npm run watch

2.WebpackDevServer （不用重新打包，也不用手动刷新页面，）

npm install --save-dev webpack webpack-dev-server

// webpack.config.js

module.exports = {
	devServer: {
		contentBase: './dist',
		open: true,//启动devServer后会自动帮你打开浏览器,并在浏览器内访问服务器地址localhost:8080
		port: 8080,
		hot: true
	},
}

启动devServer（即运行npm run start）
// package.json

{
	"scripts": {
		"start": "webpack-dev-server"
	}
}

其他devServer配置项：proxy

3.webpack-dev-middleware & express（在node中使用webpack）

// package.json

{
	"scripts": {
		"start": "webpack-dev-server",
		"server": "node server.js"
	}
}

借助express起http服务器(发ajax请求)
webpack-dev-middleware：过程中修改代码自动打包

npm install express webpack-dev-middleware -D

在根目录新建server.js

const express = require('express');
const webpack = require('webpack');

const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config);//nodejs里面有webpack这个api

const app = express();

app.use(webpackDevMiddleware(complier, {
	// publicPath: config.output.publicPath,
	// 把webpack.config.js里面output的publicPath去掉,这里写空对象也可以
}))

app.listen(3000, () => {
	console.log('server is running');
})