自动清理构建目录
npm install clean-webpack-plugin -D
避免在每次构建的时候,都需要手动清理dist文件。
在webpack.dev.js
中配置如下:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 这个地方注意,可能会报错必须用解构的方式
复制代码
plugins
下添加如下代码:new CleanWebpackPlugin()
执行npm run build 打包构建
自动补全css3前缀,autoprefixer
先安装插件:npm i postcss-loader autoprefixer -D
在webpack.prod.js
的module中配置如下:
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader, // MiniCssExtractPlugin是将css代码提取出来,这两个loader不能同时使用。
'css-loader',
'less-loader', // 用于解析less
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ['last 2 version', '>1%', 'ios 7 ']
})
]
}
}
]
},
复制代码
移动端CSS px自动转化成rem
安装插件:npm i px2rem-loader -D
到开发环境中,再直接引用npm i lib-flexible -S
{
loader: 'px2rem-loader',
options: {
remUnit: 75, // 1rem == 75px
remPrecision: 8 // 当px转换为rem的时候,小数点后面的位数。
}
}
复制代码
然后将flexble.js 内联进我们的html中!
静态资源内联
资源内联的意义:
- 页面框架的初始化脚本
- 上报相关打点
- css内联避免页面闪动
raw-loader
内联html
<script>${require('raw-loader!./meta.html')}</script>
安装 npm i raw-loader@0.5.1 -D
raw-loader
内联js
<script>${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}</script>
css内联
- 借助
style-loader
- 借助
html-inline-css-webpack-plugin
配置如下:
// 'style-loader',
{
loader: 'style-loader',
options: {
insertAt: 'top', // 样式插入到<head>中
singleton: true // 将所有的style标签合并成一个
}
},
复制代码
多页面应用(MPA)概念,多页面打包通用方案
动态获取entry和设置html-webpack-plugin
数量利用global.sync
安装glob npm i glob -D
在webpack.prod.js文件中
配置如下:
const glob = require('glob')
const setMPA = () => {
const entry = {}
const htmlWebpackPlugin = []
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 && match[1]
entry[pageName] = entryFile
htmlWebpackPlugin.push(
new HtmlWebpackPlugin({ // 通常一个html页面用一个HtmlWebpackPlugin,如果有两那就写两个
template: path.join(__dirname, `src/${pageName}/index.html`), // html模板所在的位置
filename: `${pageName}.html`, // 指定打包出来的html文件名称
chunks: [pageName], // chunk名称 指定生成的html要使用哪些chunk
inject: true, // 是否将打包出来的js或者css将自动注入到index.html中
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
)
})
return {
entry,
htmlWebpackPlugin
}
}
const { entry, htmlWebpackPlugin } = setMPA()
复制代码
module.exports = {
entry,
plugins: [
new MiniCssExtractPlugin({
filename: `[name]_[contenthash:8].css`
}),
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp: /.css$/g,
cssProcessor: require('cssnano')
}),
new CleanWebpackPlugin()
].concat(htmlWebpackPlugin)
}
复制代码
使用source map
作用:通过source map定位到源代码,开发环境开启,线上环境关闭,线上排查问题的时候,可以将问题上传到错误监控系统
sourcemap 关键字
eval
使用eval包裹模块代码sourcemap
产生.map 文件cheap
不包含列信息(当代码报错的时候,只显示报错位置所在的行信息)inline
将.map作为DataURI嵌入,不单独成.map文件module
包含loader的sourcemap
sourcemap类型
devtool | 首次构建 | 二次构建 | 是否适合生产环境 | 可以定位的代码 |
---|---|---|---|---|
(none) | +++ | +++ | yes | 最终输出的代码 |
eval | +++ | +++ | no | webpack生产的代码(一个个的模块) |
cheap-eval-source-map | + | ++ | no | 经过loader转换后的代码(只能看到行) |
cheap-module-source-map | o | ++ | no | 源代码(只能看到行) |
eval-source-map | -- | + | no | 源代码 |
cheap-source-map | + | o | yes | 经过loader转换后的代码(只能看到行) |
cheap-module-source-map | o | - | yes | 源代码(只能看到行) |
inline-source-map | + | o | no | 经过loader转换后的代码(只能看到行) |
inline-cheap-module-source-map | o | - | no | 源代码(只能看到行) |
source-map | -- | -- | yes | 源代码 |
inline-source-map | -- | -- | no | 源代码 |
hidden-source-map | -- | -- | yes | 源代码 |
提取页面公共资源
先安装: npm i html-webpack-externals-plugin -D
新增react的开发环境的CDN:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
复制代码
一下是react的线上环境的CDN:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
复制代码
在webpack.prod.js
中配置线上环境的CDN:
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
复制代码
plugins中:
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'react',
entry: 'https://unpkg.com/react@16/umd/react.production.min.js',
global: 'React'
},
{
module: 'react-dom',
entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
global: 'ReactDOM'
}
]
})
复制代码
使用 SplitChunksPlugin分离react和react-dom
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'vendors', // 提取出来的技术包的名字
test: /(react | react - dom)/, // 匹配出需要分离的包
chunks: 'all',
}
}
}
},
复制代码
在 new HtmlWebpackPlugin
对象参数中加入 chunks: ['vendors', pageName],
使用 SplitChunksPlugin分离页面公共文件
optimization: {
splitChunks: {
minSize: 300, // 分离的包的体积的大小,设置成0kb只要引用了,就会打包,假如为1000kb
cacheGroups: {
commons: {
name: 'commons', // 提取出来的包的名字,记得在new HtmlWebpackPlugin中加入chunks: ['commons', pageName],
chunks: 'all', // 将所有引入的库进行分离;默认是async是将异步引入的库进行分离;inital是将同步引入的库进行分离
minChunks: 2 // 设置最小引用次数为2次,才会打包出commons.js文件来
}
}
}
},
复制代码
在 new HtmlWebpackPlugin
对象参数中加入 chunks: ['commons', pageName],