webpack4完整使用，优化打包教程

最新推荐文章于 2024-03-20 11:54:40 发布

lal95828

最新推荐文章于 2024-03-20 11:54:40 发布

阅读量540

点赞数 1

分类专栏：打包优化 webpack 文章标签： webpack

本文链接：https://blog.csdn.net/lal95828/article/details/103486400

版权

打包同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

优化

1 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

最近在使用vue-cli创建的项目时候，看见了webpack，终于明白了点什么是打包，所以花了两个礼拜来整理webpack的笔记。好在以后能够开发自己项目时用的着

前期安装

1.安装node

1.1.网上下载node直接安装

2.初始化一个node项目

npm init

3.安装webpack 和webpack-cli

//局部安装(推荐)
npm install --save-dev webpack webpack-cli
//全局安装
npm install --global webpack webpack-cli

4.新建webpack.config.js 和配置package.js

4.1.在主目录下新建一个webpack.config.js文件

const path = require("path");//引入node路径模块

/* module.exports={
	entry:"./src/main.js",//单入口的 单文件
	output:{//单出口
		path:path.resolve(__dirname,"public"),
		filename:"mainOut.js"
	}
} */


/* module.exports={
	entry:["./src/main.js","./src/main2.js"],//单入口的 多文件
	output:{//单出口
		path:path.resolve(__dirname,"public"),
		filename:"mainOut.js"
	}
} */


module.exports={
	entry:{//多入口
		page1:'./src/page01/page01.js',
		page2:'./src/page02/page02.js'
	},
	output:{//多出口, 这里的[name] 对应 page1 和 page2 取代
		path:path.resolve(__dirname,"public"),
		filename:"[name].js"
	}
}

4.2.配置package.js的scripts

"scripts": {
	//dev 是开发模式打包命令
	//build 是生存打包命令
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

4.3.webpack打包命令

//生成开发模式的 打包文件
npm run dev
//生成生产模式的 打包文件

5.安装webpack-dev-server

5.1.webpack-dev-server是将你打包的文件配置到本地服务器上（运行它的命令会给你电脑自动创建一个本地服务器），在开发过程中，实现更新和热替换。说简单点，就是在开发阶段，方便你调试用的工具
5.2.安装

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

5.3.在webpack.config.js中配置服务器

devServer:{
		contentBase:"./build",//服务器访问的基本路径
		host:'localhost',//服务器ip
		port:8080,//端口
		open:true,//自动打开页面
	}

5.4.配置package.json

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    //多了一步 打包完了之后，通过 命令来启动
	"start":"webpack-dev-server --mode development"
  },

5.5.启动webpack-dev-server

npm run start

loader 安装

loader 是将各个不同文件打包成js能处理的文件模板（我是这样理解的）

1.css文件

1.1.安装style-loader 和 css-loader

npm install style-loader css-loader --save-dev

1.2.配置webpack.config.js

module:{
		rules:[
			{
				test:/\.css$/,//处理css文件
				use:["style-loader","css-loader"]
			},
		]
	}

2.less 和 sass文件

2.1.安装

//less的loader
npm install less-loader less --save-dev
//sass的loader
npm install sass-loader node-sass --save-dev

2.2.配置webpack.config.js

module:{
		rules:[
			{
				test:/\.css$/,//处理css文件
				use:["style-loader","css-loader"]
			},
			{
				test:/\.less$/,//处理less文件
				use:["style-loader","css-loader","less-loader"]
			},
			{
				test:/\.scss$/,//处理sass文件,文件名后缀为.scss
				use:["style-loader","css-loader","sass-loader"]
			},
		]
	}

备注：安装和使用node-sass出现问题，可参考
1、https://www.jianshu.com/p/92afe92db99f
2、https://blog.csdn.net/ze1024/article/details/100516650
如果npm命令安装node-sass失败，可以使用cnpm试试。一般情况下，需要将node-sass安装最高版本
cnpm install node-sass@latest

3.POSTCSS自动添加浏览器前缀

3.1.安装

npm install postcss-loader autoprefixer --save-dev

3.2.配置方法一：webpack.config.js，这里以css文件为例子

test:/\.css$/,//处理css文件
use:["style-loader","css-loader",{
	loader:"postcss-loader",
	options:{
		plugins:[
			require("autoprefixer")({
				browsers:[
					"ie >= 8",//ie大于8
					"Firefox >= 20",//火狐大于20
					"Safari >= 5",//safari大于5版本
					"Android >= 4",//版本大于andiroid4
					"Ios >= 6",//版本大于ios6
					"last 4 version",//浏览器最新的四个版本
				]
			})
		]
	}
}]

3.3.配置方法二：package.json

//此处为webpack.config.js设置
test:/\.css$/,//处理css文件
use:["style-loader","css-loader",{
	loader:"postcss-loader",
	options:{
		plugins:[
			require("autoprefixer"),
		]
	}
}]

//此处为package.json设置
"browserslist":[
	  "ie >= 8",
	  "Firefox >= 20",
	  "Safari >= 5",
	  "Android >= 4",
	  "Ios >= 6",
	  "last 4 version"
  ]

推荐使用方法二，因为css文件有less和lass类型等，在package.json中统一设置了，就不用在每一种文件下设置浏览器配置了，但是以下这个loader还是不能少的

loader:"postcss-loader",
options:{
	plugins:[
		require("autoprefixer"),
	]
}

4.文件处理—图片处理

4.1.安装

npm install file-loader --save-dev

4.2.选项配置options
name：为你的文件配置自定义文件名的模板（默认【hash】.【ext】）
context：配置自定义文件的上下文（默认为 webpack.config.js）
publicPath：为你的文件配置自定义 public 发布目录（可以是一个url地址，打包之后，图片路径就成了url上的路径，我的理解是将图片重定向到另一个地址）
outputPath：为你的文件配置自定义 output输出目录
备注：【】说明
[ext]：资源扩展名
[name]：资源的基本名称（原来的名称）
[path]：资源相对于context 的路径
[hash]：内容的哈希值

5.文件处理—字体文件

5.1.使用的loader与图片一致
5.2.配置

//字体文件
{
	test:/\.(eot|svg|ttf|woff|woff2)$/,
	use:"file-loader"
}

6.文件处理—第三方js库处理

6.1.方法一：本地导入（以jquery为例子）

//webpack.config.js中引入webpack
const webpack = require("webpack");
	//引入第三方js 本地导入的方式
	resolve:{
		alias:{
			jquerysB:path.resolve(__dirname,"src/js/jquery.min.js")
		}
	},
	plugins:{
		//使用webapck插件来 使用 本地导入的第三方js
		new webpack.ProviderPlugin({
			Jquery2:"jquerysB",//在自己js中使用Jquery2来代替$和jquery的使用
		})
	}

6.2.方法二：npm安装第三方库(推荐)

npm install jquery --save-dev

在js中引入使用

import $ from "jquery"

7.babel 编译ES6

7.1.安装
babel-loader//负责es6语法转化
babel-core//babel核心包
babel-preset-env//告诉babel使用哪种转码规则进行文件处理

npm install babel-loader @babel/core @babel/preset-env --save-dev

7.2.config配置

//js处理
{
	test:/\.js$/,
	exclude:/node_modules/,//排除对node_modules文件夹进行处理
	use:"babel-loader"
}

7.3.新建.babelrc 文件，配置转换规则（推荐）

{
	"presets":["@babel/preset-env"]
}

7.4.配置转换规则，直接在config中配置

//js处理
{
	test:/\.js$/,
	exclude:/node_modules/,//排除对node_modules文件夹进行处理
	use:{//直接在use中配置转换规则
		loader:"babel-loader",
		options:{
			"presets":["@babel/preset-env"]
		}
	}	
}

7.4.使用：可以直接在自己js文件中使用es6语法

8.生成HTML（打包后自动生成html文件）

8.1.html-webpack-plugin插件
该插件会根据指定的index.html模板生成对应的html文件
8.2.安装

npm install html-webapck-plugin --save-div

8.3.配置config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={	
	//......
	//配置插件
	plugins:{
		new HtmlWebpackPlugin({
			template:"./src/index.html",//模板文件路径
			filename:"webpack.html",//生成的文件名称
			minify:{
				minimize:true,//是否打包成最小值
				removeAttributeQuotes:true,//去除引号
				removeComments:true,//去除注释
				collapseWhitespace:true,//去除空格
				minifyCSS:true,//压缩html内的样式
				minifyJS:true,//压缩htmt内的js
				removeEmptyElements:true,//清除内容为空的元素
			},
			hash:true,//引入产出资源的时候加上哈希避免缓存
		})
	}
}

9.提取分离CSS

9.1.作用
将所有入口chunk（entry chunks）中引用的css文件，移动到独立分离的css文件
js文件和css文件打包后分离
9.2.安装（老版本ExtractTextPlugin插件）

npm install extract-text-webpack-plugin@next --save-dev

9.2.1.配置config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports={
	modules:{
		rules:[
			{
				test:/\.css$/,
				use:ExtractTextPlugin.extract({
					fallback:"style-loader",//编译后用什么loader来提取css文件
					use:"css_loader"
				})
			},
		]
	},
	plugins:{
		new ExtractTextPlugin("./css/[name].css")//打包后的文件路径
	}
	
}

9.3.新版本插件 mini-css-extract-plugin

npm install mini-css-extract-plugin --save-dev

9.3.1.配置config.js

const MiniCssExtractPlugin= require("mini-css-extract-plugin")
module.exports={
	modules:{
		rules:[
			{
				test:/\.css$/,
				use:[MiniCssExtractPlugin.loader,"css-loader"]
			},
		]
	},
	plugins:{
		new MiniCssExtractPlugin({
			filename:"./css/[name].css"//打包后的文件名
		})
	}
	
}

10.压缩和优化css

10.1.安装

npm install optimize-css-assets-webpack-plugin --save-dev

10.2.配置config.js

const OptimizeCssAssetsPlugin =require("optimize-css-assets-webpack-plugin");
plugins:{
	new OptimizeCssAssetsPlugin({
		assetNameRegExp:/\.css$/g,//用于匹配需要优化或者压缩的资源名,默认为/\.css$/g
		cssProcessor:require("cssnano"),//用于压缩或者优化的处理器,默认为cssnano
		cssProcessorPluginOptions:{//传递给cssProcessor的插件选项,默认为{}
			//discardComments去除注释
			preset:["default",{discardComments:{removeAll:true}}]
		},
		canPrint:true,//插件能够在console中打印信息,默认为true
	})
}

11.拷贝静态文件

11.1.一些没有用到的文档或者静态图片
11.2.安装

npm install copy-webpack-plugin --save-dev

11.3.配置config.js

const CopyWebapckPlugin = require("copy-webpack-plugin");
plugins:{
	new CopyWebapckPlugin([
		{
			//__diname表示项目根目录，当路径中存在../的时候，可以使用 path.resolve(__diename, "../路径")来合并路径
			from:__dirname + "原文件夹相对路径",
			to:__dirname + "保存文件夹相对路径",
		}
	])
}

12.清除文件

12.1.当我们修改带有hash的文件并进行打包的时候，每打包一次就会生成一个新的文件，而旧的文件并没有删除
12.2.安装

npm install clean-webpack-plugin --save-dev

12.3.配置config.js

const CleanWebpackPlugin = require("clean-webpack-plugin")
plugins:{
	new CleanWebpackPlugin(["build"],{
		root:path.resolve(__dirname,"../")//修改build文件夹的路径,当该文件不在项目文件夹是,需要根据实际情况使用
	})//要删除的文件的文件夹或者文件,一般情况下删除 生成的文件夹就好
}

13.HTML中引入图片

13.1.在进行打包之后，html中引入的本地图片是无法生效的
13.2.安装

npm install html-loader --save-dev

13.3.配置config.js

//html文件
{
	test:/\.(html)$/,
	use:{
		loader:"html-loader",
		options:{
			attrs:['img:src','img:data-src']//哪些标签的属性进行图片处理
		}
	}
}

14.sourcemap调试

14.1.为了解决实际运行代码（打包后）出现问题时无法定位到开发环境中的源代码的问题
14.2.devtool的五个基本类型

1.eval

为每一个模块添加eval（），并且在模块后增减sourceURL来关联模块处理前后的关系，简单的说，能够定位到原代码文件路径，但不能定位到行号。打包速度快。

2.source-map

会为模块生成独立的sourcemap文件。打包后的模块，会对应生成一个.map文件

3.lnline

不会生成.map文件，sourmap转换为DataUrl后添加到bundle中

4.cheap

会生成.map，与source-map的区别，cheap生成的map文件会忽略原始代码的列信息，也不包含loader的sourcemap

5.module

包含loader之间的sourcemap，将loader source map 简化为每行的一个映射
14.3.启动source，js调试和css调试

module.exports={
	//.....
	devtool:" cheap-module-eval-source-map",//以多重方式启动调试，可以进行js调试
	//css调试
	modules:{
		rules:[
			{
				test:/\.css$/,
				use:["style-loader",
				{
					loader:"css-loader",
					options:{
						sourceMap:true
					}
				}]
			}
		]
	}
	//......
}

14.4.开发模式下，建议使用 cheap-module-eval-source-map
14.5.生成模式下（打包），建议使用source-map

15.模块热替换

15.1.配置config.js

//在本地服务器配置中添加hot:true
devServer:{
	contentBase:"./build",//服务器访问的基本路径
	host:'localhost',//服务器ip
	port:8080,//端口
	open:true,//自动打开页面
	hot:true,//开启模块热替换
	hotOnly:true,//只热更新,不会重新加载页面（节省开发时间，可以开启，但是js更新需要按下面进行配置）
		//开启hotOnly之后
		/* 需要在js文件最后面加上
		if(module.hot){
			module.hot.accept()
		}
		不然,js不会起效果 */
		//另外css文件，如果使用了MiniCssExtractPlugin.loader需要更改成style-loader
},

//plugins中添加
new webpack.NamedModulesPlugin(),//打印出更新位置
new webpack.HotModuleReplacementPlugin(),//热替换

16.开发环境与生存环境的区分

16.1.安装合并两个配置文件的依赖

npm install webpack-merge --save-dev

16.2.拆分一个config.js
将一个config.js拆分成webpack.base.js (公用配置)和webpack.dev.js （开发）, webpack.pro.js（生产）

1.webpack.base.js

该文件下一般放置，webpack的入口与出口， modules和new HtmlWebpackPlugin（加载html）

2.webpack.dev.js

devtool:“source-map”
devServer:{}
new webpack.NamedModulesPlugin(),//打印出更新位置
new webpack.HotModuleReplacementPlugin(),//热替换

3.webpack.pro.js

new CleanWebpackPlugin([“build”])
new MiniCssExtractPlugin
new OptimizeCssAssetsPlugin
new CopyWebapckPlugin

16.3.webpack.dev.js与webpack.pro.js需要使用webpack-merge来结合webpack.base.js（以webpack.dev.js为例子）

//开发模式需要使用的模块引用
const merge =require("webpack-merge")
const common = require("./webpack.base.js")

module.exports = merge(common, {
	//生产模式下的配置
})

16.4.修改package.json的scripts

"scripts": {
   "dev": "webpack --mode development --config ./webapck.dev.js",
    "build": "webpack --mode production --config ./webpack.pro.js",
	"start":"webpack-dev-server --mode development --config ./webpack.dev.js"
},

17.优化打包速度

17.1.当文件比较多的时候，优化打包速度就非常有必要
17.2.优化方法

1.减少文件的搜索范围

1.1.优化resolve.extensions配置，该配置在文件没有写后缀名的时候，会默认使用配置好的后缀列表区尝试寻找对应的文件
1.2.优化resolve.modules配置，该配置设置去哪些目录下查找第三方模块，默认为node_modules
1.3.优化resolve.alias配置，该配置通过别名把原有导入路径映射陈一个新的导入路径（给路径取别名）
1.4.在rules中使用include和exclude来设置需要处理和不需要处理的文件路径

function resolve(dir){
	return path.join(__dirname,"..",dir);//根据具体路径设置
}
module.exports={
	//优化担保速度
	resolve:{
		extensions:[".js"],//文件扩展名尝试
		modules:[
			resolve("public"),
			resolve("node_module")
		],//模块的路径
		alias:{
			"alias1":resolve("./public/assets")
		},//路径别名设置
	}
}

2.设置noParse（一般用不到）

3.给babel-loader设置缓存

//js处理
{
	test:/\.js$/,
	exclude:/node_modules/,//排除对node_modules文件夹进行处理
	use:"babel-loader?cacheDirectory=true"//设置缓存
},

4.使用happyPack（使用多进程来处理js，css，图片，字体等）

安装

npm install happypack --save-dev

配置config.js

const HappyPack = require("happypack");

//rules中
//js处理
{
	test:/\.js$/,
	exclude:/node_modules/,//排除对node_modules文件夹进行处理
	loader:"happypack/loader?id=happyBabel"//此处id在下方有配置
	//use:"babel-loader?cacheDirectory=true"//该处理放在了happypack中
},
//plugins中
new HappyPack({
	id:"happyBabel",//此处的id要与rules中对应
	loaders:[{
		loader:"babel-loader?cacheDirectory=true"
	}]
})

备注：当项目比较小的时候，happypack效果反而不如不使用，所以当项目比较小的时候，前面三种更适合一点

如果你看到最后，肯定很累吧，没错，我当时写的也很累，给个赞鼓励一下呗。

lal95828

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack4完整使用，优化打包教程

最近在使用vue-cli创建的项目时候，看见了webpack，终于明白了点什么是打包，所以花了几天时间来整理webpack的笔记。好在以后能够开发自己项目时用的着前期安装1.安装node1.1.网上下载node直接安装2.初始化一个node项目npm init3.安装webpack 和webpack-cli//局部安装(推荐)npm install --save-dev webp...
复制链接

扫一扫