webpack4.x深入理解

最新推荐文章于 2024-09-26 16:25:55 发布

daisy_style007

最新推荐文章于 2024-09-26 16:25:55 发布

阅读量536

点赞数 1

文章标签： webpack loader

本文链接：https://blog.csdn.net/daisy_style001/article/details/88390383

版权

本文详细介绍Webpack 4.x的安装与配置，包括如何使用Webpack打包JavaScript文件，处理CSS、模板和图片文件，以及自动化生成HTML页面。同时，深入探讨Loader的工作原理，演示如何使用各种Loader处理不同类型的资源。

摘要由CSDN通过智能技术生成

1.webpack4.x的安装

使用npm初始化一个文件夹

D:\webpack-tset>npm init

先全部默认选项

Press ^C at any time to quit. //随时按^C退出。
package name: (webpack-tset)
version: (1.0.0)
...

Is this ok? (yes)

安装webpack

webpack 4.x 后需要安装webpack-cli ，请注意需要同步安装在当前目录

D:\webpack-tset>npm install webpack --save-dev //安装webpack
D:\webpack-tset> npm install -g webpack-cli //全局安装webpack-cli,(如果之前没有安装的话)
D:\webpack-tset> npm install --save-dev webpack-cli //同步到局部项目文件夹下

2.使用webpack打包一个文件

新建一个文件

打包这个文件，格式：webpack 文件名 -o 打包后文件名：

D:\webpack-tset> webpack hello.js -o hello.bundle.js

在要被打包的文件中引入另一文件

现在变成了两个模块

在文件中引入css文件，并打包

打包前需要安装css-loader

D:\webpack-tset> npm install css-loader style-loader --save-dev

执行打包命令：

这时变成了三个模块

3.在网页中展示打包效果

新建一个index.html文件，并引入打包后的文件

打包hello.js文件

打开index.html文件

此时hello.js的函数先被执行,执行完成后style.css的样式才生效

再看一下index.html文件的结构

style-loarder负责在html文件中插入style标签

用命令行指定css-loader

首先删除在hello,js文件中引入的css-loader

执行命令：

D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader'

文件更新自动打包

D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

查看打包进度，打包模块，打包原因

D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

4.webpack配置文件

webapck4.x之后，配置文件path必须为绝对路径

D:\webpack-demo> webpack --mode development //打包成未压缩模式

指定配置文件

D:\webpack-demo> webpack --config a.js //a.js为配置文件

自定义npm命令脚本

在package.json文件的scripts的属性里自定义命令:

此时自定义的命令会替代配置好的命令

D:\webpack-demo> npm run webpack

webpack配置的entry，output

在 webpack配置文件中定义entry 属性，来指定多个入口起点：

执行自定义命令：

此时打包成了两个文件，再看打包后的bundle.js文件:

在entry中定义多个chunk：

这种方式适合多页面应用，这是打包后的输出文件应该区分开来，从而避免打包覆盖，在输出里重新定义filename的属性值：

可以使用name-chunkhash.js格式来区分打包后的文件

执行打包命令

打包后生成了两个不同名称的文件

5.自动化生成项目中的html页面

安装插件

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

安装完成后在webpack配置文件中建立对插件的引用

const htmlWebpckPlugin=require('html-webpack-plugin')

在plugins中初始化对应的模板：

 plugins:[
        new htmlWebpckPlugin({
            template:'index.html' //根目录
        }), //初始化
    ]

在模板中引用配置参数

首先安装html加载器html-loader:

npm i html-loader --save-dev

配置参数：

 plugins:[
        new htmlWebpckPlugin({
            title:'webpack is good'
        }), //初始化
    ]

在模板中引用：

<%= htmlWebpackPlugin.options.title%>

打包后可以看到title值已经取到

ejs模板语法

<body>
    <% for ( const key in htmlWebpackPlugin.files) { %>
     <%=key %>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%>
     <%}%>
    </div>

打包后显示结果为：

根据模板引擎自定义引入的文件

打包后结果为：

设置一个上线的路径

通过对publicPath占位符的设置：

打包后引用的文件路径前会被publicPath来插入

其他一些配置参数：

  plugins:[
        new htmlWebpckPlugin({
            minify:{
                removeComments:true,//删除注释
                collapseWhitespace:false,//删除空格 和压缩打包的区别
            }
        }), //初始化
    ]

6.通过plugins生成多页面html

定义多个chunk，在plugins里多次调用插件htmlWebpckPlugin并初始化，为html自定义引入的chunks：

  entry:{ 
      page1:'./src/script/main.js', //可以被称为chunk
      page2:'./src/script/a.js'
    },

plugins:[
        new htmlWebpckPlugin({
            template:'index.html' ,//根目录
            filename:'page1.html',//自定义文件名
            inject:'body',//自定义脚本位置 ，head 或body,false
            chunks:['page1','page2'] //为当前html自定义引入的chunks
        }),
        new htmlWebpckPlugin({
            template:'index.html' ,//根目录
            filename:'page2.html',//自定义文件名
            inject:'head',//自定义脚本位置 ，head 或body,false
            chunks:['page2']
        }),
    ]

此时在打包后的html中，可以看到根据模板的配置而引入相应的chunks

当chunk比较多的时候，可以用排除法来指定不需要引入的chunk,这个参数为excludeChunks：

当指定排除page2时，生成的结果只引入了page1

通过html-webpack-plugin的inline直接插入引用的文件内容从而减少http请求

 <!-- 直接取引入文件的内容 -->
   <%=compilation.assets[htmlWebpackPlugin.files.chunks.page1.entry.substring(htmlWebpackPlugin.files.publicPath.length)].source() %>

7.什么是loader

loader的作用：

让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后利用 webpack 的打包能力，对它们进行处理

给文件指定一个loader

   module:{
			rules: [//使用babel-loader转换es6代码
				{
					test: /\.js$/,
					exclude: /node_modules/, //排除处理的文件，减少耗时
					include:'/src',//指定打包范围
					loader: "babel-loader",
					query:{
						presets: ["@babel/preset-env"]
					}
				}
			]
    },

里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) ：当碰到「在 require()/import 语句中被解析为 '.js结尾' 的路径时，在对它打包之前，先使用 babel 转换一下

这时需要安装一下babel和presets:

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

也可以在package.json文件中定义转码：

写一个组件，用es6语法

已将es6转换成浏览器能够识别的语言

处理css文件

首先安装css-loader，上文提到过，安装好了之后，用用loader处理：

	{
	test: /\.css$/,//以.css结尾的文件
	loader: "style-loader!css-loader",//css-loader引入文件，style-loader在html中插入标签
			}

使用postcss-loader和autoprefixer给样式加前缀

首先安装

npm install --save-dev  postcss-loader autoprefixer postcss

		{
					test: /\.css$/,
					use: [
						'style-loader',
						{
							loader: 'css-loader',
							options: {
								importLoaders: 1,//指定引入资源的数量
							}
						},
						{
							loader: 'postcss-loader',
							options: {
								ident: 'postcss',
								plugins: [
									require('autoprefixer')({
										browsers:['last 5 versions']
									})
								]
							}
						}
					]
				}

使用less和sass

首选安装less,less-loader和sass,sass-loader

npm i less //安装less
npm i sass //安装sass
npm install --save-dev less-loader less //安装less-loader
npm install sass-loader node-sass webpack --save-dev

配置loader:

	{
					test: /\.less$/, //  /\.scss$/
					use: [
						'style-loader','css-loader',
						{
							loader: 'postcss-loader',
							options: {
								ident: 'postcss',
								plugins: [
									require('autoprefixer')({
										browsers:['last 5 versions']
									})
								]
							}
						},
						{ loader: 'less-loader'} //less可以自己处理@import { loader: 'sass-loader'}
					]
				}

引入less文件

打包后已处理为css插入style标签

处理模板文件

首先安装html-loader:

npm i html-loader

配置html-loader：

	{
					test: /\.(html)$/,
					use: {
						loader: 'html-loader',
					}
				}

在js中引用模板文件:

打包后模板已插入到首页中：

ejs处理js模板语法

首先安装ejs-loader:

npm install ejs-loader

写一个ejs模板引擎：

传入参数：

配置loader:

	{ 
					test: /\.tpl$/, loader: 'ejs-loader',
				}

此时已正确打印出结果

处理图片文件

首先安装file-loader

npm install file-loader --save-dev

配置处理图片文件的loader:

		{ 
					test: /\.(png|jpg|gif|svg)$/i, loader: 'file-loader', //在样式文件中处理图片文件
					options: {
						name: 'img/[name]-[hash:5].[ext]',//指定打包后的相对路径和名称
					},
				},

在一个less文件中引入一张图片背景

此时file-loader已经处理为

在根模板可直接使用绝对路径引入图片

<body>
  <img src='src/assets/3b676efb4b5a91ef347427790308f320290afdb1.jpg'>
   <div id='app'></div>
</body>

在模板文件中不能使用相对或绝对路径引入图片，使用require的方式：

<img src=" ${require('../../assets/3b676efb4b5a91ef347427790308f320290afdb1.jpg')} ">

使用url-loader根据图片大小来选择打包方式

首先安装url-loader:

npm install url-loader --save-dev

配置loader：

	{ 
					test: /\.(png|jpg|gif|svg)$/i, //在样式文件中处理图片文件
					loader: 'url-loader',
					options: {
						limit: 5000000 //如果文件小于字节限制，则可以返回DataURL,否则返回data:'xxx....'格式
					}
				},

当图片大小大于limit值则返回data:格式，此时打包的js文件也会变大：

使用image-webpack-loader压缩图片

首先安装这个插件：

npm install image-webpack-loader --save-dev

配置加载器：

				{ 
					test: /\.(gif|png|jpg|jpeg|svg)$/i, //在样式文件中处理图片文件
					use:[
						'file-loader',
						{
							loader:"image-webpack-loader",//压缩图片
							options: {
								disable: true, // webpack@2.x and newer
						  	webp: { //webp选项将启用WEBP webp - 将JPG和PNG图像压缩为WEBP
									quality: 1055
								}
							},
						}
					]
		
				},

目前发现图片没被压缩小，?，是我配置错了吗