初学webpack(第一篇)

来源：互联网发布：买房软件app排行编辑：程序博客网时间：2024/06/05 00:37

作者：房姗
链接：https://zhuanlan.zhihu.com/p/24447447
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

webpack是一款很火的模块加载兼打包的工具。可是自接触以来，都是在React和Vue的项目中，与这些框架结合使用，所以为了更好地学习和使用这款工具，单独梳理了关于webpack的使用，来熟悉掌握它的基本用法。

1.安装

首先进行全局安装

npm install webpack --gobal

新建项目-->打开项目-->创建package.json（webpack的配置文件）

mkdir  test-webpackcd test-webpacknpm init

再次安装webpack（这次是在项目里，要储存在配置文件中）

npm install webpack --save-dev

这里要说一下，这次安装是为了避免一些路径的冲突，防止出现“Cannot find module 'XXX'”的报错，省去修改环境变量；这里还要注意一点你的项目名不要使用"webpack",否则在项目中安装的时候会报错！

2.建立文件

第一个文件 entry.js（入口）

在该文件中输入一些操作，我们还是用经典栗子：“hello world！”

document.getElementById('app').textContent="hello world!";

第二个文件 index.html

<body><div id="app"></div><script src="bundle.js"></script></body>

暂时不要着急bundle.js是做什么的，一会你就知道了~

3.启动

在终端中输入：请回到项目的根目录中！

webpack entry.js bundle.js

在这里又出现了bundle.js！其实呢， entry.js 是入口文件的名字，那么很明了的，bundle.js 就是生成的文件名字~

当我们成功的执行了这些操作，bundle.js里就成功地打包进去webpack相关的东西了；然后我们可以打开index.html ,在浏览器里查看效果了,页面中会输出“hello world！”~

open index.html

这些只是使用webpack最基础的用法，陆续还会分享更多更新的使用方法！

0 0