webpack学习使用-百木园

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用
如：vue项目是基于es6语法构建的，而大多数浏览器都是使用的es5语法，所以我们需要进行打包降级才能使用

为什么使用webpack

现在好多网页有着很多的应用，所以它们的JavaScript代码比较复杂，当然也有着很多的依赖包，所以为了简化开发的复杂度，前端就出现了很多比较好的实践方法：

模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
scss，less等CSS预处理器
…
等等
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求

安装webpack打包工具

npm install webpack -g
npm install webpack-cli -g

测试安装成功

webpack -v
webpack-cli -v

创建测试项目

在项目下创建modules目录

在这里插入图片描述

创建webpack.cofig.js文件

这是项目打包时的配置文件

module.exports = {
    entry: \'./modules/main.js\',//打包时，程序的入口
    output: {
        filename: \"./js/bundle.js\"
    }

}

打包

在本项目路径下执行以下命令，就会进行打包

webpack

成功

生成js/bundle.s文件
在这里插入图片描述

模拟前端模块化开发

模拟vue工程实现打包后文件的引入
在项目路径下，创建index.html文件作为程序的主入口

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Title</title>
</head>
<body>
<script src=\"dist/js/bundle.js\"></script>
</body>
</html>

常用命令：

webpack --watch

参数 --watch 用于监听变化，实现热部署

来源：https://blog.csdn.net/qq_52780421/article/details/123242071
本站部分图文来源于网络，如有侵权请联系删除。

webpack学习使用