1. 多入口构建
动态构建 entry 和创建多入口 HTML 模板文件。
Glob
glob 模块，允许使用**等符号编写一个 glob 规则，匹配对应规则的文件。基础用法如下：
// 文件：glob.js
// 异步写法var glob = require('glob')var path = require('path')var matchFilePattern = path.resolve(__dirname, "*.js"// 匹配出当前目录下所有的js文件glob(matchFilePattern), function (er, files) { console.log(files) //[D:/webpackDemo/src/glob.js]})
// 同步写法var files = glob.sync(matchFilePattern)
复制代码
多入口构建脚本
const glob = require('glob')const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')
const setMPA = ()=>{ const entry = {} const htmlWebpackPlugins = [] // 匹配src目录下所有的index.js文件作为入口文件 const entryFiles = glob.sync(__dirname,'./src/*/index.js') Object.keys(entryFiles).map((index)=>{ const entryFile = entryFiles[index] // 通过文件绝对路径匹配出文件名 const match = entryFile.match(/src\/(.*)\/index\.js/) const pageName = match && match[1] // 构建webpack的entry配置 entry[pageName] = entryFile htmlWebpackPlugins.push( new HtmlWebpackPlugin({ template:path.join(__dirname,`src/${pageName}/index.html`), filename:`${pageName}.html`, chunks:[pageName], inject:true, minify:{ html5:true, collapseWhitespace:true, preserveLineBreaks:false, minifyCSS:true, minifyJS:true, removeComments:false } }) ) }) return { entry, htmlWebpackPlugins }}
const {entry,htmlWebpackPlugins} = setMPA()
复制代码
2. CSS 相关处理和移动端 px 转 rem
1. CSS3 自动补前缀
通过 PostCSS 插件
{ test:/.less$/, use:[ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', { loader:'post-loader', options:{ plugins:()=>{ require('autoprefixer')({ browsers:['last 2 version','>1%','ios 7'] }) } } } ]}
复制代码
2. 移动端适配
采用 CSS 媒体查询实现响应式布局
@media screen and (max-width:980px){ .header{width:900px}}@media screen and (max-width:480px){ .header{width:400px}}@media screen and (max-width:350px){ .header{width:300px}}
复制代码
px 转 rem
rem 是相对单位，px 是绝对单位。
实现：使用 px2rem-loader 和手淘的 lib-flexible 库（页面渲染时计算根元素的 font-size 值）
{ test:/.less$/, use:[ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', { loader:'post-loader', options:{ plugins:()=>{ require('autoprefixer')({ browsers:['last 2 version','>1%','ios 7'] }) } } }, { loader:'px2rem-loader', options:{ remUnit:75, remPrecision:8 } } ]}
复制代码
3. 资源内联
资源内联的好处有：
页面框架的初始化脚本
上报相关打点
css 内联避免页面闪动
减少 HTTP 网络请求数（小图片或字体内联 url-loader）
<!--1. raw-loader 内联html--> <script>${require('raw-loader!babel-loader!./meta.html')}</script>
<!--2. raw-loader 内联js--> <script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>
<!--3. CSS内联 style-loader -->module.exports = { module:{ rules:[ { test:/\.scss$/, use:[ { loader:'style-loader', options:{ insertAt:'top', // 样式插入到<head> singleton:true, // 将所有的style标签合并成一个 } }, 'css-loader', 'sass-loader' ] } ] }}
<!--4. CSS内联 使用：html-inline-css-webpack-plugin -->
复制代码
4. 脚本分离
{ optimization:{ splitChunks:{ // 'async'：异步引入的库进行分离(默认) // 'initial':同步引入的库进行分离 // 'all':所有引入的库进行分离 chunks:'all', // 分离的包体积的大小 minSize:0, cacheGruops:{ // 分离页面公共文件 commons:{ name:'commons', chunks:'all', minChunks:2 // 设置最小引用次数 }, // 公共脚本分离 vendors:{ test:/[\\/]nodule_modules[\\/]/, priority:-10 }, // 分离基础包 library:{ test:/(react|react-dom)/, name:'library', chunks:'all' } } } }}
复制代码
5. 总结
至此学习了 webpack 进阶用法 1，下一章学习：代码分割和引入，打包 js 库以及 SSR 等。
附录：
浅谈Webpack的本质
Loader处理非JavaScript模块详解
Plugin事件流机制详解
浅谈Webpack原理，以及loader和plugin实现
webpack进阶用法2：代码分割和动态引入的实现方式
webpack进阶用法3：如果将代码打包成一个通用JS库
webpack 进阶用法 4：构建速度和体积优化策略（待发布）
webpack 进阶用法 5：持续集成，Travis CLI 使用（待发布）
评论