• webpack——entry,output,plugins,loader,chunk知识


    entry:打包入口

    代码的入口,找到依赖模块

    打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖

    可以是一个或者多个入口

    例如:

    1.module.exports={
    entry:'index.js'
    }

    这个module.exports对象是webpack的配置,配置有一个属性就是entry,entry属性的值就是一个文件名index.js,也可以加一个路径,只要可以找到文件

    2.module.exports={
    entry:['index.js','vendor.js']
    }

    这里entry属性的值就是一个数组,这就是根据一个文件创建多个入口

    3.module.exports={
    entry:{

      index:'index.js',

      vendor:'vendor.js'

    }
    }

    这里entry属性的值就是一个对象,这个方式相较于前两个的不同是,这里可以知道文件叫什么,可以有一个key,如果想要继续添加一个入口可以继续增加key,扩展性较好

    output:输出

    打包成文件,对打包文件进行描述

    可以是一个或者多个

    自定义规则

    配合CDN

    例如:

    1.

    module.exports={
    entry:'index.js',
    output:{
    filename:'index.min.js'
    }
    }

    单个输入配单个输出,filename就是输出文件名

    2.

    module.exports={
    entry:{
    index:'index.js',
    vendor:'vendor.js'
    },
    output:{
    filename:'[name].min.[hash:5].js'
    }
    }

    [name].min.[hash:5].js这就是自定义规则了,name表示entry的name,如果entry的name是index,[name]就是index,[hash:5]是webpack打包过程中的独一无二的标识码

    loaders:出来js之外的东西

    处理文件

    转化为模块:把文件转化为js可以认识模块

    例如:

    module.exports={
    module:{
    rules:[
    {
    test:/.css$/,
    user:'css-loader'
    }
    ]
    }
    }

    可以看到这里有一个对module.exports等于一个对象,然后对module的一个定义,一个rules数组,数组是对不同文件的定义,test:/.css$/,是对后缀为.css的文件的定义,user是使用css-loader文件

    常用loader:

    编译相关:babel-loader、ts-loader

    样式相关:

    style-loader、css-loader、less-loader、postcss-loader

    文件相关:

    file-loader、url-loader

    plugins:其他功能插件

    参与打包整个过程

    打包优化和压缩

    配置编译时的变量

    极其灵活

    例如

    const webpack=require('webpack');

    module.exports={
    plugins:[
    new webpack.optimize.UglifyJsPlugin()
    ]
    }

    plugins下的数组是对plugins的使用

    常用plugins

    优化相关:CommonsChunkPlugin  UglifyjsWebpackPlugin

    功能相关:ExtractTextWebpackPlugin  HtmlWebpackPlugin HotModuleReplacementPlugin  CopyWebpackPlugin

    Chunk:代码块

    bundle:已经被打包过后的

    Module:模块

  • 相关阅读:
    Jquery 面板导航,切换效果
    Jquery闪耀的地方,dom遍历,过滤查找的例子
    Jquery 通过 data- 来实现按钮点击切换显示隐藏
    Bootstrap 点击按钮切换内容
    c语言快速学习
    嵌入式学习
    16_文件的操作
    06_指针
    11_函数的退出方式
    10_参数数量可变的函数及命令行参数
  • 原文地址:https://www.cnblogs.com/ellen-mylife/p/10622746.html
Copyright © 2020-2023  润新知