作者：房姗
链接：https://zhuanlan.zhihu.com/p/24447447
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
webpack是一款很火的模块加载兼打包的工具。可是自接触以来，都是在React和Vue的项目中，与这些框架结合使用，所以为了更好地学习和使用这款工具，单独梳理了关于webpack的使用，来熟悉掌握它的基本用法。
链接：https://zhuanlan.zhihu.com/p/24447447
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
webpack是一款很火的模块加载兼打包的工具。可是自接触以来，都是在React和Vue的项目中，与这些框架结合使用，所以为了更好地学习和使用这款工具，单独梳理了关于webpack的使用，来熟悉掌握它的基本用法。
1.安装
首先进行全局安装
npm install webpack --gobal
新建项目-->打开项目-->创建package.json（webpack的配置文件）
mkdir test-webpack
cd test-webpack
npm 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最基础的用法，陆续还会分享更多更新的使用方法！
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
