webpack使用

已于 2022-06-16 16:14:13 修改
阅读量99 收藏
点赞数
分类专栏： 网站 文章标签： 前端
于 2022-04-22 09:27:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010009053/article/details/122964708
版权

webpack 安装

bilibili:尚硅谷2022版Webpack5入门到原理（面试开发一条龙）

npm i webpack webpack-cli -D
以下
webpack:5.70.0
webpack-cli:4.9.2
npm :8.5.3

1webpack配置文件

webpack配置文件内容webpack.config.js，

1.下面是这是多入口和多出口的配置情况

const {resolve} = require('path')
module.exports = {
	/* 这是一个入口一个出口的打包情况*/
	entry:'./src/index.js',//入口文件，如果只有一个入口格式
		output:{
		filename:'build.js',//输出文件名称
		path:resolve(__dirname,'build'), //输出文件路径
		clean:true,//自动清空上次打包结果
	}, //输出文件

/*这是两个入口一个出口的情况 */
	// entry:[
	// "./src/main.js",
	// "./src/index.js"

	// ],//入口文件，如果有两个入口，这是array写法
	// 	output:{
	// 	filename:'build.js',//输出文件名称
	// 	path:resolve(__dirname,'build') //输出文件路径
	// }, //输出文件

	/*这是两个入口两个个出口的情况 */
	// entry:{
	// 	one:'./src/index.js',
	// 	two:'./src/main.js'
	// },//入口文件，有几个入口，便有几个出口
	// output:{
	// 	filename:'[name].js',//输出文件名称
	// 	path:resolve(__dirname,'build') //输出文件路径
	// }, //输出文件

 // /* 混合式用法 */
 // entry:{
 // 	onea:['./src/main.js','./src/index.js'],
 // 	twob:'./src/index.js',
 // },
	// output:{
	// 	filename:'[name].js',//输出文件名称
	// 	path:resolve(__dirname,'build') //输出文件路径
	// }, //输出文件

	 module:{
		rules:[

		]
	},//loader配置
    plugins:[
    ],//插件
	mode:'production', //development .生产模式，production,生产模式
}

2 打包html资源

htmlwebpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引用插件
module.exports = {
	/* 这是一个入口一个出口的打包情况*/
	entry:'./src/index.js',//入口文件，如果只有一个入口格式
	output:{
		filename:'[name].js',//输出文件名称
		path:resolve(__dirname,'build') //输出文件路径
	}, //输出文件

	 module:{
		rules:[

		]
	},//loader配置
    plugins:[
    //new htmlWebpackPlugin(), //使用插件,默认创建一个空发的，目的自动引入包的资源（js/css）
    new htmlWebpackPlugin( {
    	template:'./src/index.html', //使用src中的index.html作为模板
    	filename:'demo.html', //更改文件名称
    	minify:{
    		collapseWhitespace:true ,//移除空格
    		removeComments:true, //移除注释

    	}

    }
    ), 
    ],//插件
	mode:'production', //development .生产模式，production,生产模式
}

2.1 打包多个html

打包多个htmlindex.html文件包含index.js文件和通用js，cart.html文件包含cart.js和通用js
webpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引用插件
module.exports = {

	entry:{
		vendor:['./src/js/jquery.js','./src/js/common.js'],//两个html文件通用的js
		index:'./src/js/index.js', //index.html用到的js文件
		cart:'./src/js/cart.js' //cart.html 用到的文件
	},
	output:{
		filename:'[name].js',//输出文件名称
		path:resolve(__dirname,'build') //输出文件路径
	}, //输出文件

	 module:{
		rules:[

		]
	},//loader配置
    plugins:[
    //new htmlWebpackPlugin(), //使用插件,默认创建一个空发的，目的自动引入包的资源（js/css）
    new htmlWebpackPlugin( {
    	template:'./src/index.html', //使用src中的index.html作为模板
    	filename:'index.html', //更改文件名称
    	chunks:['index','vendor'], //
    	minify:{
    		collapseWhitespace:true ,//移除空格
    		removeComments:true, //移除注释

    	}

    }
    ), 
        new htmlWebpackPlugin( {
    	template:'./src/cart.html', //使用src中的index.html作为模板
    	filename:'cart.html', //更改文件名称
    	chunks:['cart','vendor']

    }
    ),
    ],//插件
	mode:'production', //development .生产模式，production,生产模式
}

3 webpack 打包CSS资源

在这里插入图片描述需要将css写入js文件中，
在js文件中加入require(‘./style.css’)

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引用插件
module.exports = {

	entry:'./src/index.js',
	output:{
		filename:'[name].js',//输出文件名称
		path:resolve(__dirname,'build') //输出文件路径
	}, //输出文件

	 module:{
		rules:[
		{
			test:/\.css$/ ,//规则，正则表达式
			use:['style-loader','css-loader'] //引入loader，注意顺序，从右到左，从上到下，两个loader用use,一个loader用loader loader:{'style-loader'}
		}
		]
	},//loader配置
    plugins:[
    //new htmlWebpackPlugin(), //使用插件,默认创建一个空发的，目的自动引入包的资源（js/css）
    new htmlWebpackPlugin( {
    	template:'./src/index.html', //使用src中的index.html作为模板
    	filename:'index.html', //更改文件名称
    }
    )
    ],//插件
	mode:'production', //development 开发模式，production,生产模式
}

4 提取CSS为外联文件

在这里插入图片描述将style-loader 替换为MiniCssExtractPlugin.loader，
webpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引用插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //引入插件，该插件用于提取CSS文件
module.exports = {

	entry:'./src/index.js',
	output:{
		filename:'[name].js',//输出文件名称
		path:resolve(__dirname,'build') //输出文件路径
	}, //输出文件

	 module:{
		rules:[
		{
			test:/\.css$/ ,//规则，正则表达式
			use:[MiniCssExtractPlugin.loader,'css-loader'] //引入loader，注意顺序，从右到左，从上到下，两个loader用use,一个loader用loader loader:{'style-loader'}
		},
		{
			test:/\.less$/ ,//规则，正则表达式
			use:[MiniCssExtractPlugin.loader,'css-loader','less-loader'] //引入loader，注意顺序，从右到左，从上到下，两个loader用use,一个loader用loader loader:{'style-loader'}
		}
		]
	},//loader配置
    plugins:[
    //new htmlWebpackPlugin(), //使用插件,默认创建一个空发的，目的自动引入包的资源（js/css）
    new htmlWebpackPlugin( {
    	template:'./src/index.html', //使用src中的index.html作为模板
    	filename:'index.html', //更改文件名称
    }
    ),
    new MiniCssExtractPlugin(),
    ],//插件
	mode:'production', //development 开发模式，production,生产模式

5 处理CSS的兼容性

兼容性1. 新建一个浏览器兼容性的配置文件 postcss.config.js

module.exports = {
	plugins:[
	require('postcss-preset-env')()
	]
}
  1. 需要在package.json 文件中添加兼容的浏览器版本

 "browserslist":[
    ">0.2%",
    "last 2 versions",
    "not dead"
  ]
  1. webpack.config.js 添加postcss-loader
 module:{
		rules:[
		{
			test:/\.css$/ ,//规则，正则表达式
			use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader'] //引入loader，注意顺序，从右到左，从上到下，两个loader用use,一个loader用loader loader:{'style-loader'}
		},
		{
			test:/\.less$/ ,//规则，正则表达式
			use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader'] //引入loader，注意顺序，从右到左，从上到下，两个loader用use,一个loader用loader loader:{'style-loader'}
		}
		]
	},//loader配置

6. 压缩CSS文件资源在这里插入图片描述

7. 打包图片资源

webpack 自带打包图片的loader,仅需要激活就可以，不需要额外的loader,type:‘asset’
webpack.config.js代码如下：

module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            /*打包CSS中的图片 */
            {
                test:/\.(jpg|png)$/,
                type:"asset/resource",
                 parser:{
                    dataUrlCondition:{
                        //小于10KB的图片转成base64,优点：减少请求数量，缺点:体积会更大
                        maxSize:20*1024
                    }
                },
                generator:{
                    filename:'img/[hash:10].[ext]'
                }
            },
            /*打包html中的图片 */
            {
                test:/\.html$/,
                loader:'html-withimg-loader'
            }

        ]

    },

8.对js进行语法检查

在这里插入图片描述

1.webpack.config.js

          /* 对js文件语法检查eslint*/
            {
                test: /\.js$/,
                //只检查自己写的代码，不检查第三方库的代码
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            }

2.package.json

  "eslintConfig": {
    "extends": "airbnb-base"
  },

8. 开发服务器devserver配置

在这里插入图片描述1. npm i webpack-dev-server -D
2. 启动方式
命令行式：webpack serve
在webpack.config.js 中添加target:“web”，浏览器将自动刷新与保存，
自动启动：
package.json 中添加"dev" : "webpack serve --mode development "，
webpack.config.js 中添加 devServer:{
port:3001,
compress:true,//编译
open:true,//自动打开浏览器
hot:true.//HMR开启，提高打包编译速度
}
命令行中运行：npm run dev

9. 去除死代码

在这里插入图片描述

10 . 多入口提取公共模块

webpack.config.js

module.export={
...
optimization: {
        splitChunks: {
          chunks: 'all',
        //   minSize: 20000,
        //   minRemainingSize: 0,
        //   minChunks: 1,
        //   maxAsyncRequests: 30,
        //   maxInitialRequests: 30,
        //   enforceSizeThreshold: 50000,
          cacheGroups: {
            // defaultVendors: {
            //   test: /[\\/]node_modules[\\/]/,
            //   priority: -10,
            //   reuseExistingChunk: true,
            // },
            default: {
                minSize: 0,
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true,
            },
          },
        },
    }

}
u010009053
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack入门之构建目标(targets)
蛐蛐的博客
07-31 1019
文档：https://webpack.js.org/concepts/targets/ 1.简介 因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。 2.使用 要设置target属性，只需要在你的 webpack 配置中设置 target 的值。 module.exports = { target: 'node' }; node：会编译为用 Node.js 的 ..
webpack使用Vue学习案例
08-25
webpack使用vue
Tree Shaking 打包压缩时 消除死代码
sinat_55275851的博客
11-03 291
webpack 打包 Tree Shaking 打包压缩时 消除死代码
17 Webpack中的配置-Target
sinat_41212418的博客
11-29 1555
Target Target用于指定Webpack构建的环境，也就是针对不同的环境进行不同的构建： module.exports = { /* 其他配置 */ target: 'web' // 默认值 }; 当Target的值是字符类型的时候，可以去如下值： Target还可以设置为一个函数，此函数调用时会传入一个Compiler作为参数。如果以上列表中没有一个预定义的目标(Target)符合你的要求，请将其设置为一个函数。如下所示： module.exports = { /* 其
webpack性能优化总结大全
frontend_frank的博客
10-21 1587
01—开发体验优化01优化 Loader 配置由于 Loader 对文件的转换操作很耗时，所以需要让尽可能少的文件被 Loader 处理。可以通过 test/includ...
webpack-Targets（构建目标）
weixin_33989058的博客
02-26 399
构建目标(Targets)   因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。 webpack 的 target 属性不要和 output.libraryTarget 属性混淆。有关 output 属性的更多信息，请查看我们的指南。 用法 要设置 target 属...
webpack使用方法说明
11-18
webpack使用方法说明
Webpack使用培训.pptx
08-23
1111
webpack使用介绍
04-04
webpack使用介绍 webpack使用介绍 webpack使用介绍 webpack使用介绍
详解如何webpack使用DllPlugin
10-17
主要介绍了详解如何webpack使用DllPlugin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【深入理解webpack】library,libraryTarget,externals的区别及作用
前端小白
06-07 9160
经过前端框架的迅猛发展，大家开始慢慢对模块化习以为常但却不知道通过script引入和require（import）引入的区别。如何引入取决于之前如何导出，在重构一个验证码老项目时，不知如何把项目导出为可通过script引入后使用内部方法？ 情景简化为如下： 插件代码 import {util} from 'util' import styles from 'css' expo...
webpack基本使用四
dear_mRZhou_的博客
08-16 910
webpack基本使用四
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 231
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 520
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 986
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 177
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1219
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 401
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue组件render函数中作用域插槽使用方式
nicecode
04-24 312
父组件使用render函数写的,子组件的书写方式随意,想在父组件中使用子组件时写一个作用域插槽.
webpack使用教程
07-28
以下是一个简单的Webpack使用教程： 1. 安装Webpack：首先，你需要在你的项目中安装Webpack。你可以使用npm或yarn来安装Webpack。在命令行中运行以下命令来进行安装： ``` npm install webpack webpack-cli --...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值