Webpack打包工具

最新推荐文章于 2024-06-05 09:12:46 发布

xss0905

最新推荐文章于 2024-06-05 09:12:46 发布

阅读量266

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/xss0905/article/details/120633965

版权

webpack是一个用于现代JavaScript应用程序的静态模块打包工具，它构建依赖图并把模块组合成bundle。安装webpack后，通过配置webpack.config.js，可以将项目入口文件打包成指定路径的bundle.js。在HTML中引入打包后的bundle.js，即可运行代码。本文介绍了webpack的基本使用步骤，包括安装、创建模块、配置文件和打包过程。

摘要由CSDN通过智能技术生成

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

安装

使用cmd(最好是使用管理员身份运行)打开命令提示符,使用(前提拥有nmp)

npm install webpack -g

和

npm install webpack-cli -g

进行安装,安装完成后使用

webpack -v

可以查看版本号。

使用

新建一个文件件。在idea中打开此文件夹 ,创建这样的文件夹格式

1.hello.js: 可以定义多个方法

//暴露一个方法
exports.sayhi = function () {
    document.write("<h1>666</h1>")
}
exports.sayhi2 = function () {
    document.write("<h1>666</h1>")
}
exports.sayhi3 = function () {
    document.write("<h1>666</h1>")
}
exports.sayhi4 = function () {
    document.write("<h1>666</h1>")
}

2.main.js:

var hello = require("./hello");//调动hello文件夹成为hello对象
hello.sayhi();//调用sayhi()方法

3.webpack.config.js(必须这样命名):

module.exports = {
    entry:'./modules/main.js',//程序入口
    output:{
        filename:"./js/bundle.js"//打包到哪里
    }
}

4.使用webpack进行打包，成功后会有一个dist文件夹被新建

打包的代码就存放于bundle.js中

5.测试打包代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<!--前端模块化开发-->
<script src="dist/js/bundle.js"></script>

运行此html会输出

xss0905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack打包工具

概念本质上，webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。安装使用cmd(最好是使用管理员身份运行)打开命令提示符,使用(前提拥有nmp)npm install webpack -g和npm ins...
复制链接

扫一扫