专栏首页zaking's走近webpack(0)--正文之前的故事

走近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 条评论
登录 后参与评论

相关文章

  • 走近webpack(1)--多入口及devServer的使用

      上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的。  const path = require('...

    zaking
  • 用js来实现那些数据结构13(树01-二叉搜索树的实现)

      前一篇文章我们学会了第一个非顺序数据结构hashMap,那么这一篇我们来学学树,包括树的概念和一些相关的术语以及二叉搜索树的实现。唉?为什么不是树的实现,不...

    zaking
  • CSS(CSS3)选择器(1)

    这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

    zaking
  • 快速了解 前端打包 webpack

    webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始,可以不用引入一个配置...

    王念博客
  • 也来说说webpack

    在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.j...

    libo1106
  • webpack4.0各个击破(10)—— Integration篇

    webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

    大史不说话
  • webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题。

    李文杨
  • Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

    现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vu...

    一只图雀
  • webpack安装异常

    webpack中文指南:https://zhaoda.net/webpack-handbook/index.html

    Dawnzhang
  • Webpack系列-第一篇基础杂记 前言简介配置实践&优化总结

    公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,...

    菜的黑人牙膏

扫码关注云+社区

领取腾讯云代金券