Webpack

webPack学习
模块的打包器

一. 当双Entry的时候，可以使用占位符，来对双Entry进行打包
［name](ChunkName) hash chunkhash

output： 当设置publicpath的时候, 相当于在引用文件时，添加了绝对路径

web pack插件
html-webpack-plugin ：生成html， 传入参数，则跟参数的文件路径关联起来，参数fileName 也可以指定文件名
minify{removeComments: true 删除注释， collapseWhitespace删除空格，
}

inject参数，head 标识script标签嵌入head标签中

如何生成多个页面： 1.在plugins中继续new htmlPlugin
chunks，允许html只添加对自己有用的chunk 3.excludeChunks：除了一些chunk，其他都添加

二. 处理资源文件，es6语法转换，css预处理

babel loader 编译很慢，优化：使用exclude,include

css-loader,可以让js识别css 使用’！’ 可以并行另一个loader
’style-loader ! css-loader’ style-loader,可以把解析出来的css插入到style中

postcss－loader 可以用来添加一些兼容的属性的代码前缀
autoprefixer 是postcss插件

loader的处理方式是从右到左
｛loader: ’style-loader!css-loader!postcss-loader’｝
在plugins同级，使用
postcss: [require(‘autoprefixer’) {browsers:[‘last 5 versions']}] 兼容最新5个版本
出了autoprefixer还有其他好的插件

如果使用了@import，import的css文件并没有被加前缀
需要cssloader传参数｛loader: ’style!css？importLoaders=1!postcss’｝
让import进行来的css资源要被后面的一个loader加载一遍

处理less文件，就需要less-loader
｛loader: ’style!css!postcss!less’｝
less-loader需要最先处理

如果使用scss同理

三.处理模版文件
html-loader 处理html模版
EJS－loader
Vue

四.处理图片
file-loader 模版中的路径没有被替换，如果需要在模版中使用相对路径的图片
<img src=“{require{‘./../assets/bg.png'}}” />
改变转换之后的地址: query: {name = ‘assets/[name]-[hash:5].[ext]'}

url-loader 跟file－loader类似。当文件或者图片大于指定的大小的时候

image-webpack-loader 压缩图片