css自动补齐前缀
使用postCss插件的 autoprefixer 的自动补全,根据can I use 规则
// 建议 mini-css-extract-plugin 与 css-loader 一起使用, 该插件与style-loaader互斥
module.exports = {
entry: {
app: './src/app.js',
home: './src/index.js'
},
output: {
filename: '[name]_[chunkhash:8].js',
path: __dirname + '/dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
],
module: {
rules: [{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => {
require('autoprefixer')({
browsers: ['last 2 version', '>1%', 'ios 7']
})
}
}
}, {
loader: 'px2rem-loader',
options: {
// rem相对于px转换的单位,此处即1rem = 75px
remUnit: 75,
// 小数点位数
remPrecision: 8
}
}
],
}]
}
}
移动端css px自动转换成rem
使用px2rem-loader
页面渲染时计算根元素的font-size值
可以使⽤用⼿手淘的lib-flexible库
https://github.com/amfe/lib-flexible
资源内联
意义:1. 代码层面:页面框架的初始化脚本,上报相关打点,css内联避免页面闪动。2. 请求层面:减少http请求,如小图片或者字体的内联(url-loader)
html和js的内联
raw-loader (v0.5版本) 内联 html
<script>${require(' raw-loader!babel-loader!. /meta.html')}</script>
raw-loader 内联JS
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>
css内联
1. 借助于style-loader 2. 使用html-inline-css-webpack-plugin
多页面应用
每⼀次⻚面跳转的时候,后台服务器都会给返回⼀个新的html⽂档,这种类型的网站也就是多⻚网站,也叫做多⻚应用。
多页应用的打包基本思路:每个页面对应一个entry,一个html-webpack-plugin
缺点:每次新增或删除页面需要修改webpack配置
解决方案:利用glob.sync 动态获取entry和设置html-webpack-plugin数量
// 多页应用打包通用方案
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const setMap = () => {
const entry = {}
const htmlWebpackPlugins = []
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))
Object.keys(entryFiles).forEach((index) => {
const entryFile = entryFiles[index]
const match = entryFile.match(/src\(.*)\/index\.js/)
const pageName = match && match[1]
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
}
}
module.exports = {
entry: setMap.entry,
output: {
filename: '[name]_[chunkhash:8].js',
path: __dirname + '/dist'
},
plugins: [
].concat(setMap.htmlWebpackPlugins)
}
Source map
作用:通过source map可以定位到源代码。
开发环境开启,线上环境关闭。
线上排查问题的时候可以将sourcemap上传到错误监控系统。
关键字:
eval: 使用eval包裹模块代码
source map: 产生.map文件
cheap: 不包含列信息
inline: 将.map作为DataURI嵌入,不单独生成.map文件
module: 包含loader的sourcemap