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. html5标签css3的常用样式

    <meta name=''> name:有如下6个值:application-name:文档名或者应用名,整个文档只能包含一个值.author:文档作者description:文档描述ge ...

  2. Flash图表控件FusionCharts自定义图表y轴最大/最小值

    自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...

  3. 获取AX的窗口所有控件的lableID及内容

    思路,穷举Forms\TargetFormName 在AOT上面的路径得到TreeNode, 遍历各控件的属性. a1,先读Label属性,没有就读Caption属性及Text属性. a2,若a1取不 ...

  4. ASP.NET的SEO：SEO Hack --- Html注入和Nofollow

    ASP.NET的SEO:目录 黑帽(black hat)SEO主要是指采取"不怎么道德"(暂时就这么形容吧!)的方式进行搜索引擎优化. 1. 注入攻击,包括Sql注入和Html注入 ...

  5. Visitor

    #include <iostream> #include <vector> using namespace std; #define DESTROY_POINTER(ptr) ...

  6. 文件上传ajaxfileupload.js插件

    Html:  <div class="container">         <form id="form" runat="serv ...

  7. ASP.NET中Button控件的CommandName和CommandArgument属性用法

    在Repeater中的使用: <asp:Repeater ID="rptActionList" runat="server" OnItemCommand= ...

  8. IOS屏幕布局

    1.iPad和iPhone的屏幕布局 在IB中,屏幕或控件的尺寸以点为单位.在视网膜技术中,1个点包括4个像素,而没有采用视网膜屏幕技术的还是1个点包括1个像素. 2.绝对布局和相对布局 3.使用Au ...

  9. 一些peoplecode小技巧【一】

    1. Get the description of the translate value: No need to write SQLEXEC on PSXLATITEM passing fieldn ...

  10. [leetcode]_Merge Sorted Array

    题目:合并两个有序数组A , B,将合并后的数组存到A中.假设A的空间足够装下A和B所有的元素. 思路:这道题考虑如果正向扫描两个数组,则每插入一个元素,则需移动A后的所有元素.换个角度想,既然元素个 ...