Webpack

Tips

• webpack
  • webpack is a module bundler for modern JavaScript applications
• #7526 - Import a Prebuilt Webpack Bundle at Runtime
• https://webpack.js.org/comparison/
• 243B + 20B per module + 4B per dependency
• https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0

Configuration

• configuration

Concepts

• Concepts
• Entry
  • 入口
  • 应用的第一个文件

module.exports = {
  entry: './src/main.js',
};

• Output
  • 输出
• Loaders
  • 将文件转换为模块作为依赖添加到依赖图中
  • 标识哪些文件应该处理, test
  • 将那些文件做转换, use

module.exports = {
  module: [ rulles: [ {test: /\.txt$/, use: 'raw-loader'} ] ]
}

• Plugins
  • 在编译和分块(chunk)时,实现自定义功能

module.exports = {
  plugins: [new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' })],
};

ModuleFederationPlugin

• https://webpack.js.org/concepts/module-federation/

注释

import loadable from '@loadable/component';
// 自定义 chunkname
const Dashboard = loadable(() => import(/* webpackChunkName: "dashboard" */ '@/contents/Dashboard'));

// 预获取
// <link rel="prefetch" href="login-modal-chunk.js">
const OtherComponent = loadable(() => import(/* webpackPrefetch: true */ './OtherComponent'));
// <link rel="preload">
import(/* webpackPreload: true */ 'ChartingLibrary');