自动清理构建目录产物
当前构建时的问题
每次构建的时候，我们不会通过webpack自动清理构建目录，而是每次构建之前手动的删除构建目录，其实这样的话，每次构建前不清理目录的话，就会造成构建目录输出的output文件越来越多，针对这个问题利用了npm script 做了目录清理，在每次构建之前npm script里面增加前置操作 rm -rf ./dist 做完目录删除之后，接下来再运行webpack。
通过 npm scripts 清理构建⽬录
rm -rf ./dist && webpack
rimraf ./dist && webpack
这个方法，并不是特别优雅，有没有一个更加好的办法呢？答案是有的。
我们其实可以借助webpack插件的功能，在webpack里面刚好提供了一个比较好的插件，叫做clean-webpack-plugin。可以通过这个插件达到避免每次构建前需要手动的删除这个dist。
⾃动清理构建⽬录
避免构建前每次都需要⼿动删除 dist，使⽤ clean-webpack-plugin插件，这个插件我们只需要安装之后引入进来，然后使用这个插件的时候它会默认删除 output 指定的输出⽬录。
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path: __dirname + '/dist'
},
plugins: [
new CleanWebpackPlugin()
};
接下来我们具体看一下这个插件的用法。
首先我们安装一下这个插件
可以用npm run build 测试一下。
PostCSS插件autoprefixer自动补齐CSS3前缀
来看一下在webpack中对css的一些增强的功能。
大家其实都知道，移动设备的浏览器众多，因此需要面对很多兼容性问题，但其实有些兼容性问题我们在构建阶段可以尽量避免的。像css3的前缀的问题。
CSS3 的属性为什么需要前缀？
这里面其实不得不说的是由于浏览器的标准并没有完全统一，目前来看还是有以下四种浏览器内核。
举个例子
我们给一个盒子，设置border-radius这个属性，这个其实是经常存在的，这个时候呢在几年前其他浏览器对它支持不是很好的时候，我们需要补全各个浏览器的前缀，比如：
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
因为我们平时编写的css样式其实有很多，如果每一个不兼容的样式，都写前缀的话其实是一种很浪费时间的过程，有没有什么办法，我们还能正常的编写这些样式，自动的去补全这些前缀呢，答案是有的，在webpack里面我们通过autoprefixer⾃动补⻬CSS3 前缀。
PostCSS 插件 autoprefixer ⾃动补⻬ CSS3 前缀
使⽤ autoprefixer 插件
根据 Can I Use 规则（ caniuse.com/ ）
autoprefixer这个其实是css的后置处理器，与less，sass不同，less，sass通常是css的预处理，预处理器就是在是在打包前置去处理，autoprefixer是样式处理好之后，代码最终生成之后，在对它进行后置处理。我们来看一下autoprefixer的用法。
这个通常也是和PostCSS loader一起使用的，PostCSS loader其实它的功能是很强大的，除了样式补全之外呢，它还可以支持CSS Modules等。
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ["last 2 version", "> 1%", "iOS 7"]
})
]
}
}
]
}
]
}
};
下面看一下css自动补全的例子
下面实现一下样式补齐的功能。
首先我们安装一下postcss-loader 和autoprefixer插件。
打包后发现已经自动补全了。
移动端CSS px自动转换成rem
浏览器分辨率
CSS 媒体查询实现响应式布局
rem 是什么？
W3C 对 rem 的定义： font-size of the root element 也就是根元素font-size的大小。也就是说rem是一个相对的单位。怎么在webpack里面去使用rem呢。或者说我们也希望在编写代码时候安装设计稿的规范编写代码。常见的是375或者750宽度的设计稿。编写代码之后我们还是按照px单位去写，通过构建工具自动的将其转化成rem。
移动端 CSS px ⾃动转换成 rem
使⽤ px2rem-loader
⻚⾯渲染时计算根元素的 font-size 值
- 可以使⽤⼿淘的lib-flexible库
- github.com/amfe/lib-fl…
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
{
loader: "px2rem-loader",
options: {
remUnit: 75,
remPrecision: 8
}
}
]
}
]
}
};
这里面主要是使用px2rem-loader,我们通过px2rem-loader来将px转换成rem。px转换成rem之后，我们需要知道1rem等于多少px。这个时候我们需要在页面打开的时候动态的去计算根元素font-size的值。这个时候我们可以利用手机淘宝的比较成熟的方案，lib-flexible,它会自动的根据当前设备的宽高来计算根元素实际的font-size的值。接下来在代码里面看一下效果。首先安装一下px2rem-loader
静态资源内联
资源内敛的意义
html和js内敛
css内敛
这里面准备了两个文件，一个是meta.html
在模版index.html里面引入一下这个raw-loader。指定文件路径${ require('raw-loader!./meta.html')}
将原来的search.html的meta删掉，引入meta.html
接下来我们在把rem计算的脚本引入进来，删掉上节的直接复制写入script标签里面的。需要把引入的放到script标签里面去。raw-loader加一个babel-loader
已经倒入进来了。
多页面应用打包通用方案
多⻚⾯应⽤(MPA)概念
每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档， 这种类型的⽹站也就是多⻚⽹站，也叫做多⻚应⽤。
多页面与单页面相比而言其实最直接的就是，多页面毫无疑问页面发布上线之后有很多的入口，一个页面一个业务，单页面应用通常是我们会把所有的业务放到一个大入口里面去，不同的子业务还是同样一个url,只不过后面的hash会发生一些变化，多页面应用有什么优势呢，总结来看的话，他有两点优势，第一点优势就是多页面应用，相当于每个页面之间他是解耦的，另外一个优势，多页面应用对SEO更加友好。
然后我们来看一下，在webpack里面要怎样打包这个多页面。
多⻚⾯打包基本思路
多⻚⾯打包通⽤⽅案
glob的原理类似linus操作系统下的文件的通配匹配的概念，glob我们只需输入类似正则的匹配规则，然后他就会把匹配到的文件信息，或者目录的内容全部都返回出来，然后再对返回的内容进行操作就可以了。
这里面我们可以利用glob.sync,glob.sync就是说以同步的方式把这些文件都查询出来，glob.sync我们获取当前的构建的目录下面，__dirname就是运行脚本时候所在的目录也就是项目的根目录，根目录下面的./src这个文件夹下面，匹配src下面所有的一级的目录./src/* 匹配完之后在index.js这样的话我们就把所有的entry动态的获取出来了，接下来我们根据获取出来的entry数量动态的去获取html-wbpack-plugin的数量，其实就可以解决问题，接下来我们来看一下具体的实现。
多页面打包具体实现
页面结构在重新梳理一下，遵循前面我们提到的规则，新建一个index目录
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
