webpack入门学习1

最新推荐文章于 2022-12-04 22:57:39 发布

天下1281

最新推荐文章于 2022-12-04 22:57:39 发布

阅读量458

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/boysky0015/article/details/71517382

版权

webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

webpack是什么以及用途
webpack是一个前端打包工具，它可以把多个互相依赖的文件打包成一类文件。它有glup和grunt所有基本功能。
相比glup和grunt有以下优点：

支持CommonJs和AMD模块
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包等等。

那么让我们开始学习webpack，
文件的目录如下：

让我们开始webpack的旅程吧
我这里建了一个文件webpack_w1
打开cmd进入此文件夹
初始化文件npm init
一直enter（如果你不想填写信息的话）
命令执行完之后会生成一个package.json

初始化完之后，在命令行中安装webpack

npm install webpack --save-dev

然后新建app.js
在app.js中可以写入js代码
再新建一个配置文件webpack.config.js
配置信息如下

module.exports = {
    entry: './app.js',
    output: {
        filename: 'js/bundle.js'
    }
}

entry 文件的入口
output 文件的出口
配置好之后
在cmd命令行中运行webpack
执行完成之后就生成了目录中的js/bundle.js
module.exports里面如何配置，可以到webpack官网中API->Configuration中查看
最后新建一个index.html
引入打包后的bundle.js
这里要注意路径

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <script type="text/javascript" src="js/bundle.js"></script>
</head>
<body>

</body>
</html>

代码在github上，代码链接

天下1281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门学习1

webpack是什么以及用途 webpack是一个前端打包工具，它可以把多个互相依赖的文件打包成一类文件。它有glup和grunt所有基本功能。 - 相比glup和grunt有以下优点： - 支持CommonJs和AMD模块 - 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。 - 可以通过配置打
复制链接

扫一扫

专栏目录