zoukankan      html  css  js  c++  java
  • webpack entry和output配置属性

    1、entry

    entry的三种配置方式:

    (1)传递字符串:

    单个入口语法:传递一个字符串

    entry: './src/js/main.js',

     

    (2)传递数组

    将创建“多个主入口(multi-main entry),并且将它们的依赖导向(graph)到一个“chunk”时。

    entry: ['./src/js/main.js','./src/js/a.js'],

    示例,webpack.config.js文件为:

    module.exports = {
    
        //打包入口
        entry: ['./src/js/main.js','./src/js/a.js'],
        //打包后的文件
        output: {
            //不加__dirname 会报错
    
            //path:__dirname +'./dist/js',
            //filename:'bundle.js'
            //以上2行window下报错 
    
            path: __dirname,
            filename: './dist/js/bundle.js'
    
        }
    }

    执行命令:

    npm run webpack

    效果为文件合并到一个文件中了,如下:

     

    (3)传递对象

    webpack.config.js文件为:

    module.exports = {
    
        //打包入口
        entry: {
            main: './src/js/main.js',
            a: './src/js/a.js'
        },
        //打包后的文件
        output: {
            //不加__dirname 会报错
    
            //path:__dirname +'./dist/js',
            //filename:'bundle.js'
            //以上2行window下报错 
    
            path: __dirname,
            
            //注意:使用[name]确保每个文件名都不重复
            filename: './dist/js/[name].js'
    
        }
    }

     

    注意:

    你应该使用以下的替换方式来确保每个文件名都不重复。

    [name] 被 chunk 的 name 替换。

    [hash] 被 compilation 生命周期的 hash 替换。

    [chunkhash] 被 chunk 的 hash 替换

    2、output

    output.filename

    指定硬盘每个输出文件的名称。在这里你不能指定为绝对路径!

    文件hash码:

    module.exports = {
    
        //打包入口
        entry: {
            main: './src/js/main.js',
            a: './src/js/a.js'
        },
        //打包后的文件
        output: {
            //不加__dirname 会报错
    
            //path:__dirname +'./dist/js',
            //filename:'bundle.js'
            //以上2行window下报错 
    
            path: __dirname,
            //注意:使用[name]确保每个文件名都不重复
            filename: './dist/js/[name]-[hash].js'
    
        }
    }

    执行命令:

    npm run webpack

    结果:

     

    [hash] 每个文件的hash都一样,文件的hash为打包的hash。

     

    module.exports = {
    
        //打包入口
        entry: {
            main: './src/js/main.js',
            a: './src/js/a.js'
        },
        //打包后的文件
        output: {
            //不加__dirname 会报错
    
            //path:__dirname +'./dist/js',
            //filename:'bundle.js'
            //以上2行window下报错 
    
            path: __dirname,
            //注意:使用[name]确保每个文件名都不重复
            filename: './dist/js/[name]-[chunkhash].js'
    
        }
    }

    使用[chunkhash] 文件的hash都不一样,也与打包hash不一样,这里的hash是文件的MD5值

     

  • 相关阅读:
    Server has no associated SOC machines or all SOC machines are at capacity
    没有启用集成windows身份验证
    Arcgis server常见问题
    把.NET程序部署到没有安装.NET Framwork的机器上
    将图片保存到数据库表中及从数据库表中读取图片并显示
    C#实现QQ靠边隐藏的功能
    手把手教你用C#打包应用程序(安装程序)【卸载模块已添加】
    DotNet下简单的程序部署
    部署.NET平台的程序实例浅析
    程序打包
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7509827.html
Copyright © 2011-2022 走看看