1.自动清理构建目录产物
rm -rf ./dist && webpack
或者
rimraf ./dist && webpack
clean-webpack-plugin(插件) { plugins: [ new CleanWebpackPlugin() ] }
create-react-app中 const fs = require('fs-extra'); fs.emptyDirSync(paths.appBuild); //确保目录为空。如果目录不为空,则删除目录内容。如果该目录不存在,则会创建该目录。目录本身不会被删除。
2. 自动补齐css3前缀
postcss-loader cra中 { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), // Adds PostCSS Normalize as the reset css with default options, // so that it honors browserslist config in package.json // which in turn let's users customize the target behavior as per their needs. postcssNormalize(), ], sourceMap: isEnvProduction && shouldUseSourceMap, }, }
3. 移动端px 自动转化成rem
px2rem-loader
.page {
font-size: 12px; /*no*/
width: 375px; /*no*/
height: 40px;
}
后面有 /*no*/这种注释语法会不进行 rem 的转换
目前官方推荐我们使用vw、vh进行适配,postcss-px-to-viewport
4. 静态资源内联(代码层面、请求层面)
代码层面: 初始化脚本;上报相关打点;css内联避免页面闪动;
请求层面:减少http请求数(url-loader)
raw-loader 内联html,js脚本
index.html
${ require('raw-loader!./meta.html')} // html-webpack-plugin 默认使用ejs引擎的语法,可以用${}; 内联loader也是从右到左执行
css内联
1⃣️借助style-loader
2⃣️html-inline-css-webpack-plugin
5.多页面应用打包通用方案
动态获取entry和设置html-webpack-plugin数量 利用glob.sync (require('glob'))
function setMPA(){
let entry = {}
let HtmlWebpackPlugin = []
let files = glob.sync(path.join(__dirname, './src/*/index.js'))
Object.values(files).map( (file) => {
const match = file.match(/src\/(.*)\/index.js/)
const pageName = match && match[1]
entry[pageName] = file
HtmlWebpackPlugin.push( new HtmlWebpackPlugin({
...
}))
}
)
return {
entry,
HtmlWebpackPluguin
}
}
{
entry: setMPA().entry
}
6. 提取页面公共资源(基础库等的分离也通常用splitChunksPlugin)
7. 代码分割和动态import
1⃣️ 抽离相同代码到一个共享快
2⃣️ 脚本懒加载,使得初始下载的代码更小(require.ensure比较老)
可以使用react-loadable或者自己封住个异步加载的函数,关键代码为 const { default: component } = await import('./index.js')
8. webpack打包库和组件;(支持AMD、CJS、ESM)模块引入
实现一个大整数加法库的打包(33课程)
1⃣️ npm init -y
2⃣️ npm i webpack webpack-cli -D
3⃣️ 创建 webpack.config.js、index.js、src/index.js
具体借鉴(https://github.com/geektime-geekbang/geektime-webpack-course/tree/master/code/chapter03/large-number)
9. 构建配置包设置