01 自动补齐css的前缀：保证浏览器的兼容问题。需要使用autoprefixer插件和postcss-loader。
webpack.config.js文件中的代码：
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']
})]
}
}
]}
]
}
}02 移动端css ：px自动转化为rem；使用px2rem-loader,同时需要引入手淘的lib-flexible库来完成
webpack.config.js文件中的代码：需要安装npm i px2rem-loader; npm i lib-flexible -s;
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']
})]
}
},
{
loader:'px2rem-loader',
options:{
remUnit:75, 1rem相当于75px 为设计稿的10分之一，配置完会把所有的px转化为rem
remPrecision:8 转化为rem后面保留的小数
}
}
]}
]}
}
再然后在项目中index.html 导入 手淘的插件
3 资源内联：页面框架的初始化脚本，上报相关打点，css内联避免页面闪动， 减少http请求。
html与js的内联：
在index.html页面中的<head>头部引入
<script>${require('raw-loader!./meta.html')}</script>
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible.js')}</script>
css内联 方案一 借助style-loader;
rules:[{
test:'/\.scss$/',
use:[{
loader:'style-loader',
options:{
insertAt:'top', 样式插入到<head>
singleton:true 将所有style标签合并成一个
}
}]
}]
css内联 方案二 html-inline-css-webpack-plugin
04 多页面应用打包通用的方案需要动态获取entry和设置html-webpack-plugin的数量，用glob.sync
多页面的入口：entry是一个对象，对应不同的入口文件列入下面：
entry:{
index:'./src/index/index.js',
search:'./src/search/index.js'
}
所以得出的规律就是将所有的入口文件放置在src目录下利用脚本自动去进行加载src下的index.js文件
安装glob：npm i glob -D;
在webpack.config.js文件中执行如下的代码：
const glob = require('glob')
const setMPA = ()=>{
const entry = {} 入口文件
const htmlWebpackPlugins = [] 多个要渲染的模板
const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'))
Object.keys(entryFiles).map((index)=>{
const entryFile = entryFiles[index]
const match = entryFile.match(/src\(.*)\/index\.js/)
const pageName = match[1]
entry[pageName] = entryFile
htmlwebpackPlugins.push(
new HtmlWebpackPlugin({
template:path.join(__dirname,`src/${pageName}/index.html`),
filename:`${pageName}.html`,
chunks:[pageName]
})
)
})
return {entry, htmlWebpackPlugins}
}
