__dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。
path.resolve(): 方法将一系列路径或路径段解析为绝对路径。
语法:
path.resolve([from ...], to)
说明:将参数 to 位置的字符解析到一个绝对路径里。
参数说明
- from 源路径
- to 将被解析到绝对路径的字符串
chunkname :
我的理解是未被列在entry
中,却又需要被打包出来的文件命名配置。
没有给入口文件时,会生成了no-name的chunk。
我们项目就遇到过,在按需加载(异步)模块的时候,这样的文件是没有被列在entry
中的,如使用CommonJS的方式异步加载模块:
require.ensure(["modules/tips.jsx"], function(require) { var a = require("modules/tips.jsx"); // ... }, 'tips');
publicPath:静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
output.publicPath = '/static/' // 图片 url-loader 配置 { name: 'img/[name].[ext]' } // 那么图片最终的访问路径为 output.publicPath + 'img/[name].[ext]' = '/static/img/[name].[ext]'
还有不懂访问原地址:http://www.cnblogs.com/libin-1/p/6592114.html
loader下的参数query: 有几种写法,我们默认是常见的写在webpack.config.js中:
如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
举栗子:
{ test: /\.(png|jpg|gif|svg)$/, loader: 'url', query: { limit: 8192, name: '[path][name].[ext]?[hash:7]' }
详细可以看原址:http://blog.csdn.net/qq_38652603/article/details/73835153
先更新到这,慢慢来