webpack一些其他配置

本文介绍了webpack的几个关键配置项,包括context(基础目录)、output(打包结果配置)、target(代码运行环境)、module(规则配置)以及resolve(模块解析配置)。通过这些配置,可以定制化webpack的打包行为,例如设置模块解析路径、引入模块的别名,以及对外暴露的库。externals选项允许排除某些模块不被打包,以提升性能。stats配置则控制输出信息的详细程度。
摘要由CSDN通过智能技术生成

context

基本目录,一个绝对路径,用于从配置中解析入口点和加载器。

默认情况下,使用当前目录,但是建议在配置中传递一个值。这使您的配置独立于CWD(当前工作目录)。

context : path.resolve(__dirname,"src")

output

output : {
		library : "aaa",
		libraryTarget : "this"
	},

library :打包的结果,会将立即执行函数的执行结果赋值给aaa

libraryTarget :配合library更加精细的赋值给那个对象

取值:
var
window
this
global
commonjs

效果图如下:
在这里插入图片描述

target

target :打包以后代码运行的环境

target : "node"

web:打包好的代码运行在web环境

node:打包好的代码运行在node环境

module

module : {
		rules : [],
		noParse : /a\.js$/    //不去对a模块做任何解析,直接将a的源代码放到模块中
	}

rules :规则,里面每一个对象都是对应的规则

noParse:表示不需要解析的模块 大型的模块不需要再打包了 比方说jquery 提高性能

resolve.modules

告诉 webpack 解析模块时应该搜索的目录。

绝对路径和相对路径都能使用,但是要知道它们之间有一点差异。

modules : ["node_modules"]   //默认值
require("abc")  //webpack会找当前目录的node_modules文件夹,没有再找上级的node_modules文件夹

resolve.extensions

extensions: [".js", ".json"]   //默认值
require("./abc")  会依次进行查找   abc.js  如果没有找abc.json 

自动解析确定的扩展。

能够使用户在引入模块时不带扩展

resolve.alias

alias: {
  	@ : path.resolve(__dirname, 'src'),
  	_ : __dirname
}

创建 import 或 require 的别名,来确保模块引入变得更简单。

详细情况请参考这里

externals

externals : {
		jquery : $
	}

不需要打包,但是可以直接使用,提升性能

stats

默认情况下是verbose,也就是全部输出,此刻我们将他改为“errors-only”方式,只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可

stats: 'errors-only'
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值