webpack 基础

最新推荐文章于 2024-06-02 17:32:03 发布

蒂芬

最新推荐文章于 2024-06-02 17:32:03 发布

阅读量596

点赞数 3

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/L58656231/article/details/122204575

版权

1，什么是webpack？

webpack是近期最火的一款模块加载器兼打包工具，它的目的就是把有依赖关系的各种文件打包成一系列的静态资源。其简洁的说就是 js模块打包器把所有依赖2的文件生成一个图，打包成文件。

2，它有那些优势？

（1）webpack是以commonJs的形式来写脚本的，对AMD/CMD的支持比较全面，方便代码迁移。

（2）支持很多模块加载器的调用，使模块加载器灵活定制。

（3）开发比较方便。

3，优化有哪些？

webpack 的有化有： css优化压缩、图片优化、js优化压缩、detool与sourceMap、异步加载、tree shaking（摇树）、代码分包...等等。

4，webpack为什么要将所有资源放在一个文件里面？

对于浏览器来说，加载的资源越少，响应的速度也就越快，所以有时候我们为了优化浏览器的性能，会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点：当你的项目十分庞大的时候，不同的页面不能做到按需加载，而是将所有的资源一并加载，耗费时间长，性能降低。会导致依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。

5，安装部骤

先装好node和npm，因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：

6，通过全局安装webpack

在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令；在常规项目中把webpack依赖加入到package.json

加入命令： npm init npm install webpack --save

7，配置webpack

每个目录下都必须有一个webpack.config.js，

具体用法推荐去看流浪的诗人 webpack入门全面理解和运用plugins和loader，

8，利用webpack实现在页面上合理使用打包过后的js文件和图片

可以参考下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>
    <div id="content"></div>
    <img src="./build/img/demo.png">
    <script src="./build/js/index.js"></script>
</body>
</html>



index.js代码
require('./index.css');


index.css样式 
#content{
    width:121px;
    height:140px;
    background-color: red;
}