走近webpack(0)--正文之前的故事

  在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做。

  在真正的正文开始之前,我们先做一个小demo,就像所有的故事背景那样,这篇文章也作为该系列的故事背景。废话不多说,咱们开始吧。

一、安装(环境)

首先要安装node.js,这里就不多说怎么安装啦,去官网下载,然后就像安装其他软件那样安装它,git也是一样,安装好了试试下面的命令。

$ npm -v
4.2.0
$ node -v
v7.8.0

  接下来,我们开始安装webpack,首先webpack可以全局安装,也可以在你的项目下安装。但是你会发现,所有的文档甚至官方说明都不推荐全局安装webpack,因为全局安装会把webpack锁定到指定的版本,无法自由的根据情况去选择webpack版本也有可能你从git上clone的webpack版本与你本地安装的版本不同,会产生意想不到的问题。

  那么,如何安装webpack呢?代码如下:

npm install webpack -g
/*全局安装最新版本的webpack*/

npm install webpack --save-dev
/*安装最新版本的webpack到当前项目*/

npm install webpack@3.6.0 --save-dev

/*安装指定的webpack版本到当前项目*/

  在安装webpack到本地之前,需要做一个重要的操作,也就是

npm init

  这样做是为了生成package.json,记录你当前项目所用到的依赖及一些其他相关信息。

  OK,至此,我们的webpack就已经安装成功了。当前的webpack版本已经到了4.1.1,咱们暂时先使用npm install webpack@3.6.0 --save-dev命令。安装指定版本的webpack,后面必要的时候会升级webpack版本。

  那么,接下来,我们开始我们第一个webpack打包demo。

  我们先创建两个文件夹,分别命名为dist和src。

   当前的目录结构,看起来应该是这样的:

  然后,我们在index.html中写上如下的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zaking webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./entry.js"></script>
</body>
</html>

  entry.js中的代码比较简单:

document.getElementById('title').innerHTML="Hello webpack,I'am Zaking";

  然后在package.json中加入如下的命令脚本:

  在git命令行中输入npm run xx,你会发现dist目录下多了一个entry.js文件。然后用浏览器打开index.html,你会发现写在html文档可以正常打开并且运行。

这里的xx是随便输入的,npm run xx的意思就是执行xx所对应的脚本语句通常会写为build、start、dev等具有语义的命令,这里是为了让大家方便理解,并不是一定要写死

  那这句脚本语句的意思就是打包src/entry.js文件到dist/entry.js文件。

  至此,你已经学会了最基本的webpack打包方式,但是你一定会问,要是webpack只是这样用的话多麻烦。根本没有达到我们想要的自动化,热加载等使项目开发方便,打包灵活,减少http请求等优化项目的目的。

  是的,上面的打包方式在我们的实际开发和应用中基本上是不会用到的。写在这里,只是为了让大家有一个简单清晰的认识。那么让我们来看看最简单的wbepack项目应该是什么样子。

  目录结构不变,我们在根目录下新建一个文件,叫做webpack.config.js,他就是webpack的配置文件。

  现在,你的目录看起来应该是这个样子:哦对了,别忘了把dist/entry.js删除,等下还要生成这个文件的。

  我们在webpack.config.js写上如下代码:

const path = require('path');
module.exports={
    entry:{
        entry:'./src/entry.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{},
    plugins:[],
    devServer:{}
}

  然后,我们在package.json的脚本语句那里写上

  然后,在命令行中执行 npm run build,神奇的事情出现了。

> test@1.0.0 build C:\Users\lenovo\Desktop\test
> webpack

Hash: c39ddabfd4bb98624a2e
Version: webpack 3.6.0
Time: 52ms
   Asset     Size  Chunks             Chunk Names
entry.js  2.54 kB       0  [emitted]  entry
   [0] ./src/entry.js 71 bytes {0} [built]

  出现了这样的信息,说明你的文件打包成功。

  OK,至此,本文就结束了,哦你可能会问webpack.config.js的那些js是什么意思。下一章我们再一起探究他具体的含义。并且下一章会真正的带大家走近webpack。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

怎么使用 Git 和 Github 向开源项目提交 Pull Request

渣渣橘又跟我提了一下毒鸡汤,看了一下之前学的 python 脚本还能用,然后在 Github 上看到了一个爬虫集合的项目,收集各种爬虫

1523
来自专栏后端技术探索

Nginx服务器架构简析

模块化结构的思想是一个很久的概念,但也正是成熟的思想造就了Nginx的巨大优越性。

1123
来自专栏快乐八哥

Angular中ngCookies模块介绍

1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护,保存在内...

2638
来自专栏Core Net

用内网服务器对接微信公众号服务

5695
来自专栏IT 指南者专栏

Maven 项目管理工具基础入门系列(二)

? 一、前言 Maven 项目管理工具基础系列(一) 这篇文章中,我们已经初步了解了 Maven,也知道了使用 Maven 作为项目管理工具的好处,特别是已经...

3739
来自专栏木头编程 - moTzxx

PHP学习(wampServer+PhpStorm+XDebug)——环境相关配置参考(上)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1484
来自专栏前端正义联盟

小程序开发-梳理登录流程-v1.0

在小程序官网里面会提到一个小程序的登录逻辑,这是官方推荐的登录逻辑,也就是所谓的小程序登录态维护逻辑,这里是官方的图:

2432
来自专栏服务端技术杂谈

搞定分库后数据冗余和数据一致

当单个数据库数据量达到一定程度后,我们可以采用多个从库解决读请求的系统瓶颈。 而写请求的系统瓶颈往往需要通过分库解决。

2993
来自专栏魏艾斯博客www.vpsss.net

PhpStudy 安装 Ftp Server 的方法

2062
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(5)--新软件Android Studio 0.5.8安装与配置及问题解决

说真心话,Eclipse跟我们.net的VS比起来就是屌丝比高富帅,一切都是那么的难用,速度慢得我无法忍受 于是想试试Google钦点的Android Stud...

1987

扫码关注云+社区

领取腾讯云代金券