zoukankan      html  css  js  c++  java
  • Webpack entry output 单入口与多入口

    entry

    entry: 指定打包入口

    理解依赖图

    webpack是一个模块打包器
    webpack把一切资源都当成模块
    模块之间存在依赖关系

    根据入口文件找到依赖,依赖之中又有依赖,所有依赖形成依赖树,将依赖文件加入依赖图
    遍历完之后生成打包资源

    单入口

    entry的值是相对路径,总是相对于webpack.config.js去查找指定路径下的文件
    webpack以entry中的文件作为打包入口,去查找依赖关系,从而构建应用

    // 单入口
    module.exports = {
        entry:'./src/index.js',
        output: {
            // 指定输出目录
            path: path.join(__dirname, 'dist'),
            // 指定打包之后的输出文件名称
            filename: 'indexjs'
        },
    }
    

    多入口

    不管是单入口还是多入口,在output里面都只有一个output一个filename属性
    可以用占位符保证文件名的唯一性
    单入口可以用filename写死,但多入口必须通过占位符区分
    多入口最终会生成多个打包文件

    module.exports = {
      entry:{
        app:'./src/index.js',
        search:'./src/search.js'
      },
      output:{
        filename:'[name].js',
        path:__dirname+'/dist'
      }
    }
    

    以下将配置输出

    dist/app.js
    dist/search.js
    

    两个入口输出两个文件,配合占位符'[finename].js'使用

    'use strict';
    
    const path = require('path');
    
    module.exports = {
        // 入口 指定入口文件
        entry: {
            app:'./src/index.js', 
            search:'./src/search.js'
        },
        // 出口 
        output: {
            // 指定输出目录
            path: path.join(__dirname, 'dist'),
            // 指定输出文件名
            filename: '[name].js'
        },
        // 生成模式还是开发模式
        mode: 'production'
    };
    
    
  • 相关阅读:
    [HNOI2010]CITY 城市建设

    [HNOI2011]数学作业
    [NOI2012]美食节
    [HEOI2014]大工程
    [HEOI2013]ALO(待更)
    [HEOI2016/TJOI2016]序列
    贪食蛇(未完待续)
    [HEOI2016/TJOI2016]字符串
    bzoj 2437[Noi2011]兔兔与蛋蛋 黑白染色二分图+博弈+匈牙利新姿势
  • 原文地址:https://www.cnblogs.com/ltfxy/p/15328177.html
Copyright © 2011-2022 走看看