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

最新推荐文章于 2022-01-22 16:47:49 发布

weixin_34008805

最新推荐文章于 2022-01-22 16:47:49 发布

阅读量126

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012280962

版权

好多人在刚开始学习了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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
 
</html>

main.js

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

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

感受一下吧。

当然这里是基本的东西。

weixin_34008805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈webpack特点及其使用（个人备忘录）

好多人在刚开始学习了webpack之后，可能对于webpack是什么？怎么用多少会有些迷茫，下面是我的学习心得，希望能帮助到大家，有不足之处，也欢迎提出共同来讨论。webpack的特点模块化webpack会把一切视为模块，而模块化的文件会十分灵活，且容易调试以及升级，webpack会让人有种工程化的意识。压缩和打包有人会说web...
复制链接

扫一扫