• 前端模块化打包工具——webpack的深入学习


    如何在项目中使用webpack将文件进行打包,处理资源,配置开发环境,上线环境等?

    一.webpack的简单介绍:

    官网:https://webpack.js.org

    githup地址:https://github.com/webpack/webpack

            webpack是为javascript准备的打包工具,可以将多个模块打包成很少的静态文件,以下是webpack官网介绍的,简短的打包过程:

    webpack会将左侧的文件当成一个一个模块,模块之间还会有依赖关系,webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别,最后打包成右侧的以js,css,png等结尾的文件,以上就是一个简单的打包过程。

    它有什么特点呢:

    1.能够整合第三方的类库,将第三方的类库也当成一个模块,在项目中应用。

    2.减少初始化加载的时间。

    3.每个文件都可以当成一个模块,应用到项目当中。

    4.有自定义功能,每个模块都可以自定义,做自己想做的事。

    5.适合大型项目

    二.webpack的安装以及简单的打包命令

    1.进入到指定的目录下:  cd + 目录名

    2.初始化npm: npm init

    3.安装webpack: npm install webpack --save-dev

    4.打包文件的命令:webpack  fileName   fileName1  

    三.webpack四个核心概念

    简单概括:

    入口(entry):指定一到多个模块为入口文件,通过入口文件判断哪些文件有直接依赖关系和间接依赖关系,随后将这些有依赖关系的文件进行处理,放到名为bundles文件当中;

    出口(input):在入口被处理后的文件(bundles),output的作用就是将被处理后的文件输出到哪个文件下,以及如何命名终端的文件;

    loader:它的作用是让webpack处理非js的文件,因为webpack只支持js文件,所以其他类型的需要处理。1.识别对应的loader进行转换的文件,test属性2.转换这些文件,能被添加到依赖图(就是加入到打包过程中),use属性;

    插件(plugins):插件是用来扩展新应用的,比如打包优化,压缩,重新定义环境变量,可以处理很多的任务;

    详细介绍:

    1.入口(entry属性):

     有多种方式去定义:

    只需要一个入口起点的,也就是单个入口语法:

    多个入口起点的,对象语法()

     更新中。。。。。

  • 相关阅读:
    20200713 T3 图论
    20200713 T1序列问题
    【题解】P1441 砝码称重
    【题解】P2858 [USACO06FEB]Treats for the Cows G/S
    【比赛】AISing Programming Contest 2019
    20200709 T3 城堡
    20200709 T2 括号
    20200709 T1 笔记
    20200628 T3 网络检查
    个人技术总结
  • 原文地址:https://www.cnblogs.com/MissLi94/p/8144494.html
Copyright © 2020-2023  润新知