webpack 的目标

  • 将依赖项分块，按需加载。
  • 减少web app的初始加载时间。
  • 使每一个静态集合都能够作为组件使用。
  • 有能力集成第三方库，作为组件使用。
  • 高度可配置化。
  • 适用于大型项目。

INSTALLING WEBPACK

在已安装node.js的情况下，输入以下命令行：

npm install webpack -g

SETUP THE COMPILATION

创建一个空的文件夹，分别创建以下文件：

entry.js

index.html

js中写入如下内容：

document.write("webpack works.");

html内容如下：

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>

</html>

在控制台中，我们运行如下指令：

webpack ./entry.js bundle.js

webpack将会编译，生成捆绑文件。结果如下：

MUTI FILE

让我们再增加一个js，以下是文件名与内容

content.js

module.exports = "It works from content.js.";

非常典型的CommonJs式的代码，对吧。

修改entry.js的内容

去掉 document.write("It works.");

增加 document.write(require("./content.js"));

重新运行编译指令，就可以在本地访问index.html看到新的结果了。

THE FIRST LOADER

webpack 除了可以解决js的依赖外，还能解决css的引用，压缩的问题。

这时，我们需要使用loader，使用css-loader来处理css文件，使用style－loader来支持改动样式。

运行指令

npm install css-loader style-loader

更新entry.js的内容

require("!style!css!./style.css");

document.write(require("./content.js"));

我们通过!style!css!这样的形式，来指定Loader的传输管道，经过了一系列的loader处理后，结果将会是一个js组件。

编译

webpack ./entry.js bundle.js

重新浏览页面，就可以看到这样的结果。

BINDING LOADERS

通过在命令行中指定需要的loader，我们可以避免在刚才require部分的代码中，写出!style!css!

webpack ./entry.js bundle.js --module-bind "css=style!css"

这样，我们可以将entry.js修改，并不影响结果

require("./style.css");

document.write(require("./content.js"));

CONFIG FILE

程序员总是讨厌繁琐的人工操作，我们可以将刚才的 --module-bind "css=style!css"转由配置文件完成。

目录下添加webpack.config.js

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style!css" }

        ]

    }

};

这时，我们只需要输入命令webpack就可以得到相同的结果啦。

WATCH MODE

作为程序员，我们不希望每次有改动后，都要手动运行指令。

webpack --watch

使用Watch模式时，webpack将会检测所有入口js文件及其依赖项的变化，一旦变化发生，编译过程将会重新运行。

webpack 学习笔记 02 快速入门的更多相关文章

  1. springboot笔记02——快速入门quickstart

    前言 学习一个新的框架,往往会用一个quickstart快速入门,这次就写一下springboot的quickstart程序. 开发环境 JDK 1.8 Springboot 2.1.6 Maven ...

  2. C++ Primer学习笔记_1_快速入门

    C++快速入门 一 编写简单程序 // main是操作系统唯一显示调用的函数int main() {/**return返回的值是一个状态指示器 0:成功 非0:返回错误给OS*以echo $?命令可以 ...

  3. 【NodeJS 学习笔记02】入门资源很重要

    前言 在我映像中,异步最早出现与ajax,当时我还在搞.net,然后.net居然出了一个异步的控件...... 虽然我最后知道了他不是异步的......然后,前端异步用得特别多,如果不是异步的程序,你 ...

  4. Kafka学习笔记2: 快速入门

    在开始Kafka环境搭建之前,首先要安装Linux系统,并在Linux系统上安装JDK1.8版本,关于linux虚拟机的安装和linux系统下jdk的安装可以参考我的博文: http://blog.c ...

  5. 学习笔记-CCS-MSP430F5529[快速入门篇二]

    由于2021的全国电赛延期了,从今天开始打算好好整理一下使用CCS编程的经验,本篇笔记会好好整理一下我备赛期间用CCS写的程序,包括外部中断,定时器部分的定时中断,定时器输入捕获,PWM波输出,UAR ...

  6. webpack学习笔记一（入门）

    webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...

  7. Vue 学习笔记之快速入门篇

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  8. 学习笔记-CCS-MSP430F5529[快速入门篇一]

    由于最近竞赛需要使用TI公司的MSP430系列芯片,本人在最近两天匆忙的学习了一下MSP430F5529(下文统一称作5529)的使用.写下本文是为了将这两天学习内容做一个复习,并且将学习过程中遇到的 ...

  9. MongoDB学习笔记—02 MongoDB入门

    Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...

随机推荐

  1. 如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证？

    如何在IIS7上配置 FTP7并使用IIS管理凭据方式进行验证? 在 Windows Server 2008 R2 发布后,gOxiA 就开始着手于相关的测试和评估.IIS 是重点测试和评估之一!而今 ...

  2. 使用ImageNet在faster-rcnn上训练自己的分类网络

    具体代码见https://github.com/zhiyishou/py-faster-rcnn 这是我对cup, glasses训练的识别 faster-rcnn在fast-rcnn的基础上加了rp ...

  3. 百度地图API 学习网站

    官方示例:http://developer.baidu.com/map/jsdemo.htm#a1_2 (注意:此网页可能由于浏览器问题,源代码编辑器中的代码不能看到.火狐亲测有效) http://d ...

  4. VMware10中的CentOS6.5命令行安装VMwaretools工具启用windows与虚拟机中Linux系统的共享目录

    VMware10中的CentOS6.5命令行安装VMwaretools工具启用windows与虚拟机中Linux系统的共享目录 一.描述 系统描述:win7旗舰版64位系统+VMware Workst ...

  5. Win2D 官方文章系列翻译 - 避免内存泄漏

    本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-avoiding-memory-leaks/ 在托管 XAML 应用中使用 Win2D 控件时,必须谨慎处理对 ...

  6. php和apache安装心得

    又一次安装apache和php~~ 又一次心碎的体验~ 本想参考之前的apache配置之间进行安装(在windows 下编辑,然后传到linux上),怎耐,一直有问题,打开浏览器直接进行下载.发现是浏 ...

  7. 图的最短路算法 Floyd

    多源最短路径算法 时间复杂度O(N3) 简单修改可求有向图的传递闭包 #include<iostream> using namespace std; const int maxn=1024 ...

  8. TCP/IP详解学习笔记（10）-- DNS：域名系统

    1.DNS      DNS 是计算机域名系统(Domain Name System 或Domain Name Service) 的缩写,它是由解析器以及域名服务器组成的.域名服务器是指保存有该网络中 ...

  9. php curl 提交 总结

    1.post https提交 方法 function curl_post2($url='', $postdata='', $options=array()){ $ch = curl_init($url ...

  10. ionic ngcordova camera

    拍照是經常用到的,所以記錄一下 拍照的代碼... 1. ionic start camera blankcd camera ionic platform add ios 2. 添加插件,這裏很熟悉.. ...