webpack 使用记录

webpack

拭目以待 发布于

一、path.resolve path.join 的区别

path.resolve([from ...], to)

将 to 参数解析为绝对路径。

path.join([path1][, path2][, ...])

用于连接路径。该方法的主要用途在于,会正确使用当前系统的路径分隔符,Unix 系统是斜杠"/",Windows 系统是反斜杠。

path 属于 nodejs, 并不是 webpack 的内置对象。

关于path的文档 http://www.runoob.com/nodejs/nodejs-path-module.html


二、postcss-loader 的作用

在打包时为指定的浏览器增加css hack, 解决css的兼容性问题


三、resolve-url-loader 的作用

基于原始源文件解析url()语句中的相对路径的 webpack 加载器。

与 sass-loader 结合使用,并指定url()相对于相关 .scss 文件的资产。


四、webpack-dev-server 与 webpack-dev-middleware 的区别

webpack-dev-server

提供一个服务, 这个服务带有实时重载的功能

webpack-dev-middleware

在已有的服务上提供一个实时重载的功能


五、使用 webpack-dev-middleware 时 server.js中的 publicPath 配置方式

webpack-dev.config.js 中的 output 中配置的 publicPath 需要与启动服务的 publicPath 相同

app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath
}));




webpack 文档: http://www.css88.com/doc/webpack2/configuration/entry-context/