跳至正文
Wener Notes

Webpack

约 1 分钟阅读

Tips

Configuration

Concepts

  • Concepts
  • Entry
    • 入口
    • 应用的第一个文件
JavaScript
module.exports = {
  entry: './src/main.js',
};
  • Output
    • 输出
  • Loaders
    • 将文件转换为模块作为依赖添加到依赖图中
    • 标识哪些文件应该处理, test
    • 将那些文件做转换, use
JavaScript
module.exports = {
  module: [ rulles: [ {test: /\.txt$/, use: 'raw-loader'} ] ]
}
  • Plugins
    • 在编译和分块(chunk)时,实现自定义功能
JavaScript
module.exports = {
  plugins: [new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' })],
};

ModuleFederationPlugin

注释

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

关联信息

反向链接、本文链接的其他页面和外部资料。

参考资料

GitHub1 条
其他外链6 条
最近更新commit 6b73767编辑

WebCrypto

上一页

WebSocket

下一页