Webpack有4个主要核心点:
入口:entry
出口/输出:output
Loader
插件:plugins
先看下面的代码:
module.exports={
"entry":'./src/a.js',
output:{//output
'path':path.resolve(__dirname,'dist'),//这个必须为绝对路径,但是最好用动态,因为有可能我们的文件路径会进行改动。所以这个时候可以用到node提供的path模块
filename:'bundle.js',
publicPath:"http://cdn.example.com/assets/[hash]/"
}
}
关于代码解析:
Module这个模块是common.js提供的标准,里面有很多属性,包括id,exports属性。
然后module.exports===exports,返回true.
Entry:
回到正题,module.exports对象有entry属性。这个是webpack配置文件的必须属性。(webpack.config.js)
entry可以是一个字符串值,也可以是一个对象。对象里面的属性/值都是映射到入口路径名称的。Entry本质就是在打包的时候,webpack首先检索到webpack.config.js文件,然后,根据这个文件的entry属性找到入口,接着慢慢找依赖关系模块并解析。通常入口文件在src文件夹中。
Output:
故名意思,出口。是表示文件打包以后的输出地址和文件名。最起码有path和filename俩个属性,所以最起码保证他是个对象属性。
Filename是打包以后的文件名称。
Path是打包以后文件的路径字符串。注意,他是一个绝对路径。通常出口文件是在dist文件夹中。
我们再来看里面path属性值调用了个path点方法,path点方法是一个工具函数,这个是由node.js提供,专门用于分析文件路径的,是node.js的一个路径模块内的内容。所以需要使用node,然后require(path)模块加载进来使用。
PublicPath:
webpack中的publicPath就是你加载资源的前面的公共路径。就比如你写./,代表的就是你打包之后,会在./这个相对路径下找要加载的资源。