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. IIS安全工具UrlScan介绍 ASP.NET 两种超强SQL 注入免费解决方案( 基于IIS,使用免费工具) 批改或隐藏IIS7.5的Server头信息 移除X-Powered-By,MVC,ASP.NET_SessionId 的 HTTP头或者cookie名称

    微软给了我们一个很好的工具用来使IIS安全的运行-------UrlScan,下面是它的配置文件介绍 [options]UseAllowVerbs=1                ; 若为1,则使用 ...

  2. Linux系统自启动脚本

    只需编辑/etc/init.d/rc.local文件,在最后加上你的脚本即可.比如:我已经编写了一个脚本shell.sh,存放在/home/mars704/Desktop/ 下面在终端输入 gedit ...

  3. jmeter随笔（23）--在csv中维护变量参数

    点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...

  4. Github开源编辑器Atom

    Atom是Github社区开发的一款开源编辑器,很有sublime text特色,相当于开源的sublime text. sublime text用了很长时间了,为什么会重新学习使用另外一款编辑器呢? ...

  5. 【练习】显示MYSQL客户机选项

    [oracle@enmo ~]$ mysql --help mysql Ver , for Linux (x86_64) using EditLine wrapper Copyright (c) , ...

  6. jquery是如何清除ajax缓存的

    大家都知道万恶的IE在ajax中往往只读取第一次ajax请求时候的数据,其余时候都是从cache提取数据,(太懒了T_T).原生的JS清除ajax缓存的方法多,但是终觉有点繁琐,如果是用jquery的 ...

  7. SQO (标准查询运算符)方法 & Linq To Object

    #region SQO (标准查询运算符) 方法 #region Where() Find() FindAll() FirstOrDefault()等方法 static void c01where() ...

  8. IE11-IE不再任性了-关于attachEvent

    今天解决了一个IE11的兼容问题,关于attachEvent的. 控件是ActiveX的,需要监听一个控件相关的事件.蓦然发现attachEvent在IE11不支持了...attachEvent不是I ...

  9. myeclipse的一些设置

    常用快捷键 Ctrl + Shift + R 搜索文件Ctrl + Shift + T 搜索类型Ctrl + O 搜索成员   智能提示 Windows > Preferences > G ...

  10. 本机不安装Oracle客户端，使用PL/SQL Developer连接远程数据库

    附送PL/SQL Developer11中文版下载地址 1.先到Oracle网站下载Instant Client : http://www.oracle.com/technetwork/databas ...