超简单 webpack 打包工具入门
Posted zxn-9588
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超简单 webpack 打包工具入门相关的知识，希望对你有一定的参考价值。
对前端这个岗位来说，模块化开发是必须要走的一个过程，这其中打包工具的使用必不可少，下面我就说一下 webpack 打包工具的用法，非常简单，学会它，webpack 你就入门了。
使用 webpack 前，你需要准备什么？
- 安装 node
- 淘宝镜像 cnpm（最好有）
- 安装 webpack
如果前两步你都已经有了，那么可以直接跳转到第三步，安装 webpack 命令行如下：
1、全局安装 webpack
cnpm install -g [email protected]
这里你可以指定版本安装，也可以不指定，但是 webpack 的最新版本可能是有问题的，所以要是安装最新版本，可要做好项目不能运行的准备（我就碰到了，悲伤）
2、创建一个空文件，并进入，及本地安装项目运行时的依赖（如果你已经安装了 git，可以直接右键=>git bash here如果没有，可以 win+r => cmd 命令行进入），然后本地安装
cnpm install --save-dev [email protected]
3、依赖项全部下载完之后，创建一个 package.json 文件，创建完成之后，如果你的 package.json 文件夹里面没有很多的依赖项，总共只有简短的十几行的话，那就从第二步重来一遍，其中，命令跑完之后，会跳出很多关于项目的描述，一路 enter 默认过去就行
cnpm init
4、如果接下来的步骤中，你不知道怎么出问题了，怎么也解决不了，可以删除 webpack ，然后重新来过，不然你会很头疼的
npm uninstall webpack -g (全局卸载)
5、在本地安装完成之后，你就可以敲代码了，首先在空文件下创建两个文件夹，一个存放源码，一个存放浏览器读取的代码，创建的方式有很多种，不过高大上一点，你可以使用 git 命令
mkdir app //存放源码
mkdir public //存放浏览器读取的文件
然后在 app 文件夹下指定两个文件，一个是 Greeter.js，一个是 main.js（做入口文件使用），public 文件夹下指定 index.html 文件，然后整个的结构树如下：
其中，bundle.js 是我们编译后的文件名称，后面有解释
其中，index.html 的文件内容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="root"></div> <script src="bundle.js"></script>//直接引入接下来要编译的文件名称 </body> </html>
Greeter.js 文件内容如下：
module.exports = function () {
var greet = document.createElement("div");
greet.textContent = "Hello Webpack";
return greet;
}
main.js 文件内容如下：
const greeter = require("./Greeter.js");
document.querySelector("#root").appendChild(greeter());
其实呢，到了这一步，你就可以直接在控制台打包应用了，通过 webpack "入口文件路径" "编译后的文件路径" （实际编译引号不带，但是这种方法容易出错），使用最广的打包方式是 webpack 打包，步骤如下：
6、在项目的根目录下创建一个 webpack.json.js 的文件，里面的内容如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
这其中呢，对初学者来说有很大的坑，希望大家别犯，就是"__dirname"是两个下划线，不是一个，哎，好悲伤，其中呢，entry 是指定的入口文件路径，__dirname 是 node.js 的一个变量，指向的当前的目录；output 是打包后的文件所存放的地方和生成的编译文件的名称，然后呢，就可以直接在控制台打印了，如果和下面的差不多，那就代表成功了
然后你就可以向往常一样的方式打开 index.html 文件就可以了，
感谢这两篇文章的贡献者，谢谢
https://www.jianshu.com/p/42e11515c10f
https://blog.csdn.net/wanxue0804/article/details/79427332
以上是关于超简单 webpack 打包工具入门的主要内容，如果未能解决你的问题，请参考以下文章