webpack基础知识点

• 性能优化：

1. 在生产环境配置文件下，路径写上contentHash值，这样在下一次打包的时候，会进行哈希值比对，判断是否命中缓存
2. url-loader：会把在阈值内的文件打包生成dataURL的形式，减少http请求

• 高级配置

1. 如何配置多入口

entry入口：
entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },
plugins：
new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
    chunks: ['index']  // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other']  // 只引用 other.js
})

2. 抽离css文件

plugin：//抽离css文件
new MiniCssExtractPlugin({
   filename: 'css/main.[contenthash:8].css'
})
//抽离之后进行压缩处理
optimization: {
   minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

3. 抽离公共代码

splitChunks: {
    chunks: 'all',
    /*** 
    initial 入口 chunk，对于异步导入的文件不处理
    async 异步 chunk，只对异步导入的文件处理
    all 全部 chunk
    */
    // 缓存分组
    cacheGroups: {
        // 第三方模块
        vendor: {
            name: 'vendor', // chunk 名称
            priority: 1, // 权限更高，优先抽离，重要！！！
            test: /node_modules/,
            minSize: 0,  // 大小限制
            minChunks: 1  // 最少复用过几次
        },
        // 公共的模块
        common: {
            name: 'common', // chunk 名称
            priority: 0, // 优先级
            minSize: 0,  // 公共模块的大小限制
            minChunks: 2  // 公共模块最少复用过几次
        }
    }
}

4. 懒加载

//import返回一个promise
import('url').then()