一、什么是webpack?为什么要使用它?

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

  为什么我们要使用它呢?因为现今的很多网页,它们拥有复杂的JavaScript代码和一大堆依赖包,开发起来比较耗时耗力。为了简化开发复杂度,

  前端社区涌现出很多好的实践方法:模块化、Sass/Less等CSS预处理器......这些改进确实大大提高了我们的开发效率,但是利用它们开发的文

  件往往需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐的,这就为webpack类的工具出现提供了需求。

    本篇文章基于Webpack4.0测试通过。

   

    从上图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

  接下来我们简单为大家介绍 Webpack 的安装与使用。

二、安装webpack

    在安装 Webpack 前,你本地环境需要支持node.js。   

  默认安装在C:\Program Files\nodejs文件下,并将该目录添加PATH环境变量。具体做法,

  右击”我的电脑“-”属性“-“系统高级”-”高级“-”环境变量“-选择“变量名:

  PATH”;“改变量值:在最后面添加【C:\Program Files\nodejs】(根据自己的安装目录而定)”。

  打开cmd直接运行命令:  node  -v

  显示:

    

    则表示node.js安装成功。

  由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

  使用 cnpm 安装 webpack:

cnpm install webpack -g        //全局安装
cnpm install --save-dev webpack //安装到你的项目目录

  个人建议进行全局安装(省事)。

三、正式使用

  1. 先创建一个文件夹,这里我起名为 wpDemo,进入这个文件夹,在cmd命令行里输入:  npm init

  输入这个命令终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在 npm 中发布你的模块,

  这些问题的答案都不重要,回车默认即可。然后会在当前文件夹内生成一个package.json文件,这是一个标准的npm说明文件。

  2.  安装webpack依赖,由于我是全局安装所以这一步可以省略,若不想全局安装,可以进行本项目内安装,安装命令上面已有。

  3.  回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,

  public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个 index.html文件)。接下来我们再创建三个文件:

  • index.html   --放在public文件夹内
  • Greeter.js         --放在app文件夹内
  • main.js             --放在app文件夹内

  此时的项目结构如下图所示(全局安装webpack,若是本项目内安装会多一个 node_moudles 文件夹):

  我们在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为bundle.js

  之后我们还会详细讲述)。

  

  我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

  

  main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。

  

  4.  记下来我们使用webpack来打包

  • 全局安装webpack情况: webpack app/main.js -o public/bundle.js
  • 非全局安装情况:      node_modules/.bin/webpack app/main.js -o public/bundle.js     

  结果如下:

  

  此时的目录结构如下:

  

  可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果:

  

    有没有很激动,已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操作,其实是不太方便且容易出错的,

  接下来看看Webpack的另一种更常见的使用方法。

·  5.  通过配置文件来使用webpack     

    Webpack拥有很多其它的比较高级的功能(比如说下一篇会介绍的loadersplugins),这些功能其实都可以通过命令行模式实现,
  但是正如前面提到的,这样不太方便且容易出错的,更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,
  我们可以把所有的与打包相关的信息放在里面。
 
    继续上面的例子来说明如何写这个配置文件,在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,我们在其中写入
  如下所示的简单配置代码,目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。
module.exports = {
entry: __dirname + "/app/main.js",  //已多次提及的唯一入口文件
output: {
path: __dirname + "/public",     //打包后的文件存放的地方
filename: "bundle.js"         //打包后输出文件的文件名
}
}

  :  “__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

    有了这个配置之后,再打包文件(先删除bundle.js),只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,

  这条命令会自动引用webpack.config.js文件中的配置选项,示例如下:

  

    又学会了一种使用Webpack的方法,这种方法不用管那烦人的命令行参数,有没有感觉很爽。如果我们可以连webpack(非全局安装需使用node_modules/.bin/webpack)

  这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

  6.  更快捷的打包任务   

    在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的,不过值得庆幸的是npm可以引导任务执行,对npm进行配置后可以在命
  令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可,设置方法如下:
{
"name": "wpdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"     // 修改的是这里,JSON文件不支持注释,引用时请清除
},
"author": "",
"license": "ISC"
}

  package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,

    你都不需要写前面那指明详细的路径了。 

    npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行
  中运行时,需要这样用npm run {script name}npm run build,我们在命令行中输入npm start试试,输出结果如下:
  

    现在只需要使用npm start就可以打包文件了,有没有觉得webpack也不过如此嘛,不过不要太小瞧webpack,要充分发挥其强大的功能我们需要修改配置文件的其它选项,一项项来看。下一篇我会详细讲解webpack的其他模块。

 

webpack入门系列1的更多相关文章

  1. webpack入门系列2

    前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶. 1.使用 webpack 构建本地服务器: 想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webp ...

  2. webpack 快速入门 系列 - 自定义 wepack 上

    其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...

  3. webpack 快速入门 系列 —— 性能

    其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载 ...

  4. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  5. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  6. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

  7. 前端学习 node 快速入门 系列 —— npm

    其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...

  8. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  9. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

随机推荐

  1. 【题解】P5446 [THUPC2018]绿绿和串串(manacher)

    [题解]P5446 [THUPC2018]绿绿和串串(manacher) 考虑对于一个串进行\(f\)操作,就是让他变成一个以最后一个节点为回文中心的回文串. 那么对于某个位置\(p\),假如它是一个 ...

  2. 【题解】P4137 Rmq Problem(莫队)

    [题解]P4137 Rmq Problem(莫队) 其实这道题根本就不用离散化! 因为显然有\(mex\)值是\(\le 2\times 10^5\)的,所以对于大于\(2\times 10^5\)的 ...

  3. 使用这些idea插件让开发效率提高5倍

    idea 有很多非常好用的插件,用好了这些插件能够极大的提高开发效率 插件用的好,bug 就追不上了我

  4. Python第二天了哇

    在Python中input是接收用户输入的一个函数哇 a = int( b) 这个的意思是把b的值转换为整型? 好像是这个亚子 Python想要知道它的内置函数的话可以在Python的交互界面(She ...

  5. 【一起学源码-微服务】Feign 源码一:源码初探,通过Demo Debug Feign源码

    前言 前情回顾 上一讲深入的讲解了Ribbon的初始化过程及Ribbon与Eureka的整合代码,与Eureka整合的类就是DiscoveryEnableNIWSServerList,同时在Dynam ...

  6. vim的常用指令(脑图)

    将正在编辑的文件另存新文件名   :w newfilename 在正在编辑的文件中,读取一个filename    :r filename 做了很多编辑工作,想还原成原来的文件内容   :e! 我在v ...

  7. Netty--【详解】

    Netty概述:1.netty是基于Java NIO的网络应用框架,client-server框架2.Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一 ...

  8. 【C&数据结构】---关于链表结构的前序插入和后序插入

    刷LeetCode题目,需要用到链表的知识,忽然发现自己对于链表的插入已经忘得差不多了,以前总觉得理解了记住了,但是发现真的好记性不如烂笔头,每一次得学习没有总结输出,基本等于没有学习.连复盘得机会都 ...

  9. margin和 padding 以及 float :left和float :right的介绍

    1.margin和padding的介绍 margin是外边距,padding是内边距,用CSS时首先要做的就是把所有标签的margin和padding清空.这样更容易控制布局和兼容浏览器. p li等 ...

  10. LeetCode 第15题-三数之和

    1. 题目 2.题目分析与思路 3.思路 1. 题目 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且 ...