浅谈webpack特点及其使用（个人备忘录）

Achilles 发布于2019-08-21 17:54 / 300人阅读

摘要：的特点模块化会把一切视为模块，而模块化的文件会十分灵活，且容易调试以及升级，会让人有种工程化的意识。的安装形式安装也可以直接安装到项目的依赖里配置入口文件模块打包的起点称之为入口文件。是你第一个启动的文件。

好多人在刚开始学习了webpack之后，可能对于webpack是什么？怎么用多少会有些迷茫，下面是我的学习心得，希望能帮助到大家，有不足之处，也欢迎提出共同来讨论。

webpack的特点

模块化

webpack会把一切视为模块，而模块化的文件会十分灵活，且容易调试以及升级，webpack会让人有种工程化的意识。

压缩和打包

有人会说webpack就是为js打包而生的，其他的功能也是后来才加上去的，所以webpack更注重打包，也就是说文件打包功能更加强大。此外，现在的webpack不仅能给js文件打包，css文件等等都可以，至于如何实现我们后面会提到。它还可以预编译文件等等。

webpack的安装

npm 形式安装

$npm install webpack -g

也可以直接安装到项目的依赖里

npm init
npm install webpack -save-dev

配置webpack.config.js what is entry point (入口文件)

模块打包的起点称之为入口文件。入口文件会告诉webpack从哪里开始打包和遵循着什么依赖关系进行打包。是你app第一个启动的文件。

实例

建立index.html

建立main.js

建立webpack.config.js文件

安装live-server并预览程序

index.html

main.js

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }
};

安装live-server，
npm install live-server -g

感受一下吧。

当然这里是基本的东西。

云服务器 idc机房托管 cdn加速的特点及其优势 webpack使用 webpack 使用公用cdn 免费域名空间及其使用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90192.html

个人整理, 阅读过的好文章 (每天随时更新)

摘要：大家有好的文章可以在评论下面分享出来共同进步本文链接数组使用之道程序员进阶学习书籍参考指南教你在不使用框架的情况下也能写出现代化代码巧用数组函数框架中间件实现没错，这就是面向对象编程设计模式需要遵循的个基本原则令人困惑的在中使用协程实现多任大家有好的文章,可以在评论下面分享出来, 共同进步! 本文github链接 php PHP 数组使用之道 PHP程序员进阶学习书籍参考指南教你...

Chiclaim 2019-07-01 12:31 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

xfee 2019-08-15 12:33 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

makeFoxPlay 2019-07-31 11:00 评论0 收藏0