js学习笔记：webpack基础入门（一）

之前听说过webpack，今天想正式的接触一下，先跟着webpack的官方用户指南走：

在这里有：

如何安装webpack
如何使用webpack
如何使用loader
如何使用webpack的开发者服务器

一、安装webpack

你需要之前安装node.js

$ npm install webpack -g

安装成功后，便可以使用webpack命令行了。

ok，开始工作！

二、新建一个空目录，名字为myApp，文件如下

entry.js

document.write("It works.");

index.html文件

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

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

    </body>

</html>

此时并没有bunble.js文件，我们通过webpack命令来生成：

$ webpack ./entry.js bundle.js

这句命令会编译entry.js文件为新文件bunble.js。如果执行成功的话，会有如下结果：

Version: webpack 1.12.2

Time: 43ms

    Asset     Size  Chunks             Chunk Names

bundle.js  1.42 kB       0  [emitted]  main

chunk    {0} bundle.js (main) 28 bytes [rendered]

    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

然后，打开index.html，便会看出输出到屏幕上的It works.。

三、使用模块的形式，进行简单的模块导出与加载

新建文件：content.js

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

然后，编辑entry.js文件：

var content = require("./content.js");

document.write(content);

然后，继续用webpack进行编译：

$ webpack ./entry.js bundle.js

此时浏览器变回输出It works from congtent.js。

webpack会自己分析你的入口文件是否依赖其他文件，这些文件（或者模块）会引入到bundle.js中。webpack会给每个模块一个唯一的id，然后会在bundle.js中保存访问这些模块的id。刚开始的时候只有入口文件被执行，当碰到require的时候就会加载依赖。

四、使用第一个加载器

在目录中新建一个css文件，webpack自己只能处理js文件，需要css－loader来处理css文件，同时也需要style－loader去读取css文件中的样式。

安装这些加载器：

npm install css-loader style-loader

安装完成后，会在目录下多了一个node_modules文件夹，这些加载器就被下载到这里面。

新建style.css文件：

body {

    background: yellow;

}

然后编辑入口文件：entry.js

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

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

此时，重新编译文件，刷新浏览器，会发现背景色变成黄色了。

$ webpack ./entry.js bundle.js

在引入css的时候，我们写了!style!css!，其实也可以不用写，可以将加载器绑定在webpack的命令中：

require("./style.css");

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

然后，执行命令的时候把加载器一起输入：

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

然后刷新浏览器，会发现结果是一样的。

五、利用配置文件

通过以上的方式，我们每次添加文件，都要写一个规则，然后在编译执行，确实很麻烦，webpack可以通过配置文件来简化这些事情：

新建webpack.config.js文件，并利用如下规则

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

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

        ]

    }

};

然后执行命令的时候只需要一个webpack即可：

$ webpack

执行webpack后，会搜索当前目录下的webpack.config.js文件，并加载。

以上的配置文件和之前的代码执行的效果相同，只不过是将规则写入到了一个配置中，可以更方便灵活的进行配置。其实配置也很明朗：入口文件、出口文件、加载器。

六、更漂亮的输出结果

之前有输出结果，不够直观，webpack可以通过几个配置项来美化输出结果：

进度条:progress

如果文件很多，我们需要知道当前正在编译哪个文件，还有颜色

webpack --progress --colors

观察模式:watch

所谓观察模式，即监听模式，如果有文件改变，则自动编译：

webpack --progress --colors --watch

七、开发者服务器

所谓开发者服务是启动webpack提供的服务器，所有的测试在该服务器下进行。需要安装webpack-dev-server

npm install webpack-dev-server -g

然后，启动该服务器即可：

webpack-dev-server --progress --colors

此时，会自动启动一个端口为8080的服务器，在浏览器中访问：http://localhost:8080就可以访问了。

如果文件有该改变，代码会自动编译并且自动刷新浏览器。相当于绑定了watch模式。

需要注意的是，访问http://localhost:8080是无法自动刷新的，需要访问http://localhost:8080/webpack-dev-server/bundle，你修改文件，该页面会自动刷新。

原文地址：js学习笔记：webpack基础入门（一）

js学习笔记：webpack基础入门（一）的更多相关文章

Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
《马哥出品高薪linux运维教程》wingkeung学习笔记-linux基础入门课程
计算机原理概念: 1.CPU和内存中的存储单元通信线路称为总线(BUS),总线是被指令和数据复用的,所以也称为前端总线. 2.计算机中计算频率的时间标准即晶体振荡器原理,精确计算时间长度,根据相同的时 ...
JS学习笔记1_基础与常识
1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...
Vue.js学习笔记--1.基础HTML和JS属性的使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...
006 SpringCloud 学习笔记2-----SpringCloud基础入门
1.SpringCloud概述微服务是一种架构方式,最终肯定需要技术架构去实施. 微服务的实现方式很多,但是最火的莫过于Spring Cloud了.SpringCloud优点: - 后台硬:作为Sp ...
Vue.js学习笔记--2.基础v-指令
整理自官网教程 -- https://cn.vuejs.org/ 1. v-bind绑定Class与Style a. 绑定Class 语法:v-bind:class="{classname: ...
java 从零开始，学习笔记之基础入门<Oracle_基础>（三十三)
Oracle 数据库基本知识 [训练1] 显示DEPT表的指定字段的查询. 输入并执行查询: SELECTdeptno,dname FROM ...
java 从零开始，学习笔记之基础入门<集合>（十六）
集合集合:将多个元素放入到一个集合对象中去,对应的集合对象就可以用来存储多元素. Collection接口的子接口:Set接口和List接口. Map不是Collection接口的子接口. Coll ...
学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案
初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...

随机推荐

SWT组件添加事件的四种方式
在我们CS日常开发过程中会经常去为组件添加事件,我们常用的为AWT与SWT.SWT的事件模型是和标准的AWT基本一样的.下面将按照事件的四种写法来实现它. 一.匿名内部类的写法 new MouseAd ...
NOIp 2013 #3 转圈游戏 Label：模拟
题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……,依此 ...
bzoj 3931 [CQOI2015]网络吞吐量（最短路，最大流）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3931 [题意] 只能通过1-n的最短路,求网络最大流 [思路] 分别以1,n为起点做最 ...
fastclick.js介绍
原文地址:http://www.uedsc.com/fastclick.html 用途:去掉移动端click事件的300ms的延迟. 延迟为什么存在 …在移动浏览器中,当你点击按钮的单击事件时,将 ...
CentOS7 安装 Mysql 服务
我希望所有的软件包都用 rpm.yum 安装,这样卸载.升级.管理方便,可是自带的 yum 仓库里面没有 mysql-server 或者不是最新的,我需要安装MySQL官方的 yum 仓库, http ...
(中等) UESTC 360 Another LCIS ，线段树+区间更新。
Description: For a sequence S1,S2,⋯,SN, and a pair of integers (i,j), if 1≤i≤j≤N and Si<Si+1<S ...
Vue-小demo、小效果合集（更新中...）
(腾讯课堂学习小demo:https://ke.qq.com/course/256052) 一.简单的指令应用 --打击灭火器图片素材点击腾讯课堂的链接获取 html: <!DOC ...
SELECT list is not in GROUP BY clause and contains nonaggregated column
报错如下: Expression # of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘sss.m ...
Log4J日志整合及配置详解
Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使用这三个组件可以轻松 ...
2018.12.08 codeforces 939E. Maximize!（二分答案）
传送门二分答案好题. 题意简述:要求支持动态在一个数列队尾加入一个新的数(保证数列单增),查询所有子数列的最大值减平均值的最大值. 然而网上一堆高人是用三分做的. 我们先考虑当前的答案有可能由什 ...