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'
    };
    
    
  • 相关阅读:
    HTML5 Input 类型
    Html5 web 储存
    解决json日期格式问题的3种方法(转载)
    Json格式串处理
    全局图片防盗链处理
    我的博客开张了
    iPhone手机屏幕分辨率
    通过CSS3伪类,美化Radio按钮样式
    测试用例 相关
    MongoDB基本命令
  • 原文地址:https://www.cnblogs.com/ltfxy/p/15328177.html
Copyright © 2011-2022 走看看