webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了

 

__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

 

先更新到这，慢慢来

 

转载于:https://www.cnblogs.com/webcabana/p/7606351.html