var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry：{
'entry1': './a.js',
'entry2': './b.js',
'entry3': './c.js',
'entry4': './d.js'
},
module: {
loaders: [
{
test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader')
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
一、webpack简介
1.1 版本更迭
image.png
大版本变化
image.png
1.2 功能进化
Webpack V1
Webpack V2
Webpack V3
V1 ->V2
迁移指南 https://doc.webpack-china.org/guides/migrating/
V2 ->V3
更新升级即可
二、webpack核心概念
2.1 Entry
2.2 Output
2.3 Loaders
2.3.1 常用Loader
编译相关
样式相关
文件相关
2.4 Plugins
2.4.1 常用plugins
优化相关
功能相关
2.5 名词
三、初探 webpack
3.1 使用babel打包es6
3.1.1 编译 ES 6/7
Babel
Babel Presets
Babel Polyfill
Babel Runtime Transform
例子
3.2 打包 Typescript
配置
tsconfig
Typings
例子
3.3 提取 js 的公用代码
例子
image.png
3.4 代码分割和懒加载
第一种方式：通过wepack内置方法
第二种方式：通过ES2015 Loader Spec
import()方式返回一个promise在import中传入需要依赖的明，动态加载模块，就可以像使用Promise一样使用import().then()
代码分割场景
例子
运行打包这时loadash提取到vendor中
image.png
这时候还不是我们想要的
image.png
image.png
image.png
import()动态加载的写法
合并了subPageA和subPageB
image.png
来看看打包后的文件，既有A、B
image.png
在webpack代码分割中使用async异步加载
image.png
image.png
3.5 处理 CSS 和 CSS 模块化
引入css
Style-Loader
Style-Loader的options
例子
CSS-Loader
options
CSS-Modules
例子
配置Less / Sass
例子
提取 CSS
例子
image.png
3.6 PostCSS in Webpack
安装
例子
3.7 Tree shaking
3.7.1 JS Tree shaking
使用场景
例子
3.7.2 CSS Tree shaking
例子
四、由浅入深Webpack
4.1 文件处理
4.1.1 图片处理
4.1.2 处理雪碧图、base64、压缩图片
4.1.2 处理字体文件
4.1.3 处理第三方 JS 库
1.providePlugin
以引入jQuery为例
引入本地libs中的jQuery
2.imports-loader
4.2 HTML in webpack(自动生成HTML)
4.2.1 生成 HTML
options
4.2.2 HTML 中引入图片
