Skip to main content

Webpack

Tips

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

注释

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');