脚本宝典收集整理的这篇文章主要介绍了我的生涯一片无悔,想起那天下午夕阳下的奔跑,那是我逝去的青春,webpack跟着文档攒经验,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
node知识
path.resolve
path.resolve(From[...pathname], to)将参数to位置的字符解析到一个绝对路径里。
__dirname 当前文件目录绝对路径
__filename 当前文件全路径
demo示例:(当前目录: D:wwwPRogramsreact-prodconfig)
// 相对路径根据当前位置绝对路径解析
// ../匹配上一层
// ./ 或者 没有./匹配当前路径
// D:wwwprogramsreact-prodconfigdist
path.resolve('./dist')
// D:wwwprogramsreact-proddist
path.resolve('../dist')
// D:wwwprogramsreact-prodconfigwwwdist
path.resolve('www/demo', '../dist')
// D:dist绝对路径直接返回
path.resolve('/dist')
// 如果只传递一个参数,那么相对路径将基于当前命令的执行路径
输出
console.LOG(path.resolve('./dist'))
console.log(path.resolve(__dirname, './dist'))
当在D:wwwprogramsreact-prod路径下执行时,分别返回
D:wwwprogramsreact-proddist
D:wwwprogramsreact-prodscriptdist
当在D:wwwprogramsreact-prodscript路径下执行时,分别返回
D:\www\programs\react-prod\script\dist
D:\www\programs\react-prod\script\dist
所以为了表现一致,path里面解析绝对路径,需要加上__dirname
webpack知识
context
配置基础目录,使config中的相对路径基于这个目录,这样,不管webpack配置文件放在哪里,我们在文件内部引用外部文件时,都可以根据一个相同的基础目录解析文件,只需修改config.context一个地方就可以了。
entry入口
用法:
@H_126_130@单入口: entry: string|Array<string>,传入数组会将数组中的文件作为统一一个入口一起打包成一个文件
- 多入口: 用法:entry: {[entryChunkName: string]: string|Array<string>}根据入口打包成多个js文件
output输出
在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
- filename 用于输出文件的文件名。
- 目标输出目录 path 的绝对路径。
常用loaders
1.css-loader
css加载器 css-loader, style-loader
css-loader 解释(interpret) @import 和 url() ,会 import/require() 后再解析(resolve)它们
style-loader用来将解析出来的css内容添加到页面的style标签里面。但是一般情况下我们都会将css样式与js文件分离,这样可以有效减小代码体积。2.66kb -> 816bytes+27bytes
css-loader+style-loader一般需要结合两个plugin一起使用,分别用于将css分离和压缩