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

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

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

安装 Webpack

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

使用 npm 安装 webpack:

npm install webpack -g
npm install --save-dev webpack-cli -g

创建项目

接下来我们创建一个目录 app:

mkdir app

在 app 目录下添加 runoob1.js 文件,代码如下:

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

接下来我们创建另外一个 js 文件 runoob2.js,代码如下所示:

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

在 app 目录下添加 index.html 文件,代码如下:

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

接下来我们使用 webpack 命令来打包:

webpack runoob1.js -o bundle.js

在浏览器访问,输出结果如下所示:

webpack 根据模块的依赖关系进行静态分析,这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时,会先执行 runoob1.js 中的代码,其它模块会在运行 require 的时候再执行。

LOADER

Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

npm install css-loader style-loader

执行以上命令后,会再当前目录生成 node_modules 目录,它就是 css-loader 和 style-loader 的安装目录。

接下来创建一个 style.css 文件,代码如下:

body {
background: yellow;
}

修改 runoob1.js 文件,代码如下:

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

接下来我们使用 webpack 命令来打包:

在浏览器访问,输出结果如下所示:

配置文件

我们可以将一些编译选项放在配置文件中,以便于统一管理:

创建 webpack.config.js 文件,代码如下所示:

module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件

插件

插件在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工。

webpack 自带一些插件,你可以通过 cnpm 安装一些插件。

使用内置插件需要通过以下命令来安装:

npm install webpack --save-dev

比如我们可以安装内置的 BannerPlugin 插件,用于在文件头部输出一些注释信息。

修改 webpack.config.js,代码如下:

var webpack=require('webpack');

module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins:[
  new webpack.BannerPlugin('webpack打包实例')
]
};

然后运行:

webpack

打开 bundle.js,可以看到文件头部出现了我们指定的注释信息。

开发环境

我们可以使用 webpack-dev-server 开发服务,这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装
npm install webpack-dev-server -g # 运行
webpack-dev-server

在浏览器打开 http://localhost:8080/ 输出结果如下:

webpack打包初始入门教程的更多相关文章

  1. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. webpack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. Vue.js + Webpack + ECMAScript 6 入门教程

    Vue.js学习教程 1.Vue.js——60分钟快速入门 2.Vue.js——60分钟组件快速入门(上篇) 3.Vue.js——60分钟组件快速入门(下篇) 4.Vue.js——基于$.ajax实现 ...

  5. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  6. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  8. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  9. Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...

随机推荐

  1. 解Bug之路-Nginx 502 Bad Gateway

    解Bug之路-Nginx 502 Bad Gateway 前言 事实证明,读过Linux内核源码确实有很大的好处,尤其在处理问题的时刻.当你看到报错的那一瞬间,就能把现象/原因/以及解决方案一股脑的在 ...

  2. 项目积累————关于map的getOrDefault用法

    今天在学习领导的编程手法时,注意到了以前没用过的一个方法,那就是map的getOrDefault,看了一下感觉这个方法的用途还是非常广泛的,比如可以实现一个简单的通讯录的功能.下面看我写的一个测试类. ...

  3. rabbitMQ结合spring-boot使用(1)

    从这一节开始我们进入rabbitMQ的实战环节,项目环境是spring-boot 加maven.首先让我们创建一个spring-boot项目,然后引入web依赖和 rabbitMQ的依赖 <de ...

  4. NIO(三):Selector选择器

    一.堵塞式与非堵塞式 在传统IO中,将数据由当前线程从客户端传入服务端,由服务端的内核进行判断传过来的数据是否合法,内核中是否存在数据. 如果不存在数据 ,并且数据并不合法,当前线程将会堵塞等待.当前 ...

  5. PHP基础之排序

    前言 之前简单介绍了流程控制,函数,数组等.有兴趣的可以看看. PHP入门之类型与运算符 PHP入门之流程控制 PHP入门之函数 PHP入门之数组 接下来介绍一下排序,排序是将一组数据,依指定的顺序进 ...

  6. (数据科学学习手札92)利用query()与eval()优化pandas代码

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 利用pandas进行数据分析的过程,不仅仅是计算 ...

  7. Java中的不可变集合,我们换个方式理解!!!

    不可变集合例: public static final ImmutableSet<String> COLOR_NAMES = ImmutableSet.of( "red" ...

  8. Golang并发编程基础

    硬件 内存 作为并发编程一个基础硬件知识储备,首先要说的就是内存了,总的来说在绝大多数情况下把内存的并发增删改查模型搞清楚了其他的基本上也是异曲同工之妙. 内存芯片--即我们所知道的内存颗粒,是一堆M ...

  9. 企业微信人员日程推送接口(python版)

    企业在使用企业微信中,有时想批量推送员工日程信息.这里写了个接口工具分享给大家,供交流学习. 主入口程序: # -*- coding: utf-8 -*-import time as time imp ...

  10. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...