我的生涯一片无悔,想起那天下午夕阳下的奔跑,那是我逝去的青春,webpack跟着文档攒经验

发布时间:2019-08-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了我的生涯一片无悔,想起那天下午夕阳下的奔跑,那是我逝去的青春,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>,传入数组会将数组中的文件作为统一一个入口一起打包成一个文件
  1. 多入口: 用法:entry: {[entryChunkName: string]: string|Array<string>}根据入口打包成多个js文件

output输出

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

  1. filename 用于输出文件的文件名。
  2. 目标输出目录 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分离和压缩