超简单 webpack 打包工具入门

Posted zxn-9588

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了超简单 webpack 打包工具入门相关的知识,希望对你有一定的参考价值。

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

使用 webpack 前,你需要准备什么?

  1. 安装 node
  2. 淘宝镜像 cnpm(最好有)
  3. 安装 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 打包工具入门的主要内容,如果未能解决你的问题,请参考以下文章

webpack入门篇--1.简单介绍

Webpack 2 入门

webpack入门

入门webpack(浓缩学习webpack经过)

Webpack2入门

前端打包工具webpack入门