超简单 webpack 打包工具入门

时间 2019-11-10

标签简单 webpack 打包工具入门繁體版

原文原文链接

对前端这个岗位来讲，模块化开发是必需要走的一个过程，这其中打包工具的使用必不可少，下面我就说一下 webpack 打包工具的用法，很是简单，学会它，webpack 你就入门了。html

使用 webpack 前，你须要准备什么？前端

安装 node
淘宝镜像 cnpm（最好有）
安装 webpack

若是前两步你都已经有了，那么能够直接跳转到第三步，安装 webpack 命令行以下：node

一、全局安装 webpackwebpack

cnpm install -g webpack@1.13.2

这里你能够指定版本安装，也能够不指定，可是 webpack 的最新版本多是有问题的，因此要是安装最新版本，可要作好项目不能运行的准备（我就碰到了，悲伤）git

二、建立一个空文件，并进入，及本地安装项目运行时的依赖（若是你已经安装了 git，能够直接右键=>git bash here若是没有，能够 win+r => cmd 命令行进入），而后本地安装web

cnpm install --save-dev webpack@1.13.2

三、依赖项所有下载完以后，建立一个 package.json 文件，建立完成以后，若是你的 package.json 文件夹里面没有不少的依赖项，总共只有简短的十几行的话，那就从第二步重来一遍，其中，命令跑完以后，会跳出不少关于项目的描述，一路 enter 默认过去就行npm

cnpm init

四、若是接下来的步骤中，你不知道怎么出问题了，怎么也解决不了，能够删除 webpack ，而后从新来过，否则你会很头疼的json

npm uninstall webpack -g (全局卸载)

五、在本地安装完成以后，你就能够敲代码了，首先在空文件下建立两个文件夹，一个存放源码，一个存放浏览器读取的代码，建立的方式有不少种，不太高大上一点，你可使用 git 命令浏览器

mkdir app //存放源码
mkdir public //存放浏览器读取的文件

而后在 app 文件夹下指定两个文件，一个是 Greeter.js，一个是 main.js（作入口文件使用），public 文件夹下指定 index.html 文件，而后整个的结构树以下：bash

其中，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 打包，步骤以下：

六、在项目的根目录下建立一个 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

http://www.javashuo.com/article/p-fphbndte-by.html