webpack（四）

30.Webpack 多入口打包

多页应用程序

一个页面对应一个打包入口

公共部分单独提取

entry: {
  index: './src/index.js',
  album: './src/album.js'
},
output: {
  filename: '[name].bundle.js'
},
    
    
new HtmlWebpackPlugin({
  title: 'Multi Entry',
  template: './src/index.html',
  filename: 'index.html',
  chunks: ['index']  // 指定所使用的的bundle
}),
new HtmlWebpackPlugin({
  title: 'Multi Entry',
  template: './src/album.html',
  filename: 'album.html',
  chunks: ['album']
})

31.Webpack提取公共模块

optimization: {
  splitChunks: {
    // 自动提取所有公共模块到单独 bundle
    chunks: 'all'
  }
},

32.Webpack动态导入

按需加载

动态导入的模块会自动分包

const render = () => {
  const hash = window.location.hash || '#posts'

  const mainElement = document.querySelector('.main')

  mainElement.innerHTML = ''

  if (hash === '#posts') {
    import('./posts/posts').then(({ default: posts }) => {
      mainElement.appendChild(posts())
    })
  } else if (hash === '#album') {
    import('./album/album').then(({ default: album }) => {
      mainElement.appendChild(album())
    })
  }
}

33.Webpack魔法注释

import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
   mainElement.appendChild(posts())
})

34.miniCssExtractPlugin

提取css到单个文件,超过150kb

// yarn add mini-css-extract-plugin --dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin()
rules: [
  {
    test: /.css$/,
    use: [
       // 'style-loader', // 将样式通过 style 标签注入
       MiniCssExtractPlugin.loader,
       'css-loader'
    ]
  }
]

35.Webpack OptimizeCssAssetsWebpackPlugin

// yarn add optimize-css-assets-webpack-plugin --dev
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')  // 压缩css
const TerserWebpackPlugin = require('terser-webpack-plugin')  // 压缩js
 
// minimize: true 开启的时候使用
optimization: {
  minimizer: [
    new TerserWebpackPlugin(),
    new OptimizeCssAssetsWebpackPlugin()
  ]
},

36.输出文件名（Hash)

生产模式下，文件名使用Hash

解决缓存问题

filename: '[name]-[hash].bundle.js'

filename: '[name]-[chunkhash].bundle.js'

filename: '[name]-[contenthash:8].bundle.js'