20181203——Webpack 不是开始的开始

什么是webpack
Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具,在webpack中,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如vue用的是vue-loader当然这是后话,在后面我们再来说。

# 确保已经进入项目目录
# 确定已经有 package.json,没有就通过
npm init
# 创建,直接一路回车就好,后面再来详细说里面的内容。
# 安装 webpack 依赖

npm install webpack webpack-cli --save-dev
# 简单的写法:-_-,缩写形式
npm i webpack webpack-cli -D
# –save:模块名将被添加到dependencies,可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies,可以简化为参数-D。

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js,(这里你想用什么名字都可以,只需要在打包的时候读取文件为该名字就好,不过,到时候就知道这个名字的含义啦!
html

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="./dist/bundle.js"></script>
    <!-- 注意这里引入的不是我们创建的文件,而是用webpack生成的文件 -->
</body>
</html>

js

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

由于我们将 webpack 安装在了 项目目录。所以是不会向终端写入 webpack 命令的,这时我们可以像 npm script 中加入命令 :

"scripts": {
  "start": "webpack entry.js --output-filename=./bundle.js --mode=development"
},

然后我们运行 npm run start,就会执行 webpack entry.js --output-filename=./bundle.js --mode=development。

在浏览器中打开index.html,就能看到我们设置的文字啦!:这是我第一个打包成功的程序

这么简单的功能直接在html中引入不就好了吗?确实是这样的,不过我们这才刚刚开始嘛,不要急。

下面我们再来增加一个文件,名为first.js内容如下:

var h2= document.createElement("h2")
h2.innerHTML="不是吧,那么快第二个打包程序啦!";
document.body.appendChild(h2);

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

更改 entry.js:

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");

loader介绍
Loader可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过require来加载任何类型的模块或文件,比如VUE、JSX、SASS 或图片
Loader可以通过管道方式链式调用,每个loader可以把资源转换成任意格式并传递给下一个loader,但是最后一个loader必须返回JavaScript。
Loader可以同步或异步执行。
Loader运行在node.js环境中,所以可以做任何可能的事情。
Loader可以接受参数,以此来传递配置项给loader。
Loader可以通过文件扩展名(或正则表达式)绑定给不同类型的文件。
Loader可以通过npm发布和安装。
除了通过package.json的main指定,通常的模块也可以导出一个loader来使用。
Loader可以访问配置。
插件可以让loader拥有更多特性。
Loader可以分发出附加的任意文件。

加载 CSS 文件
还是上一篇博客中的文件,来添加一个css文件。style.css,在里面添加

body {
    background: red;
}

修改我们的entry.js,原文件不变,添加require("!style-loader!css-loader!./style.css");,用来引入我们的css文件。

扩展名自动绑定loader

这就是我们的loader的使用方式了。如果每次 require CSS 文件的时候都要写 loader 前缀!style-loader!css-loader!这样的东西,显然是一件很麻烦的事情。我们需要它可以根据模块类型(扩展名)来自动绑定需要的 loader。

来看看更简便的方式,将 entry.js 中的 require("!style-loader!css-loader!./style.css")修改为require("./style.css"),可以改变一个背景颜色让你更明显的查看到变化!然后执行:

了解webpack配置
Webpack在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的webpack.config.js文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

我们现在仅仅需要运行:webpack,如果你的配置没有问题的话,可以在命令行中看到正确的输出,因为这个命令会自动在当前目录中查找webpack.config.js的配置文件,并按照里面定义的规则来进行执行。

上面我们仅仅是使用了这个配置文件,我们肯定想在实际的工作环境中,自我对于项目进行针对性的配置。下面我们就先来简单的了解一下里面参数的意义:

entry:指入口文件的配置项,它是一个数组的原因是webpack允许多个入口点。
当然如果你只有一个入口的话,也可以直接使用双引号"./entry.js"
output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称
module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。

了解webpack插件
下面就来看看webpack中的插件:

插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack.config.js中的plugins 选项中指定。

Webpack本身内置了一些常用的插件,还可以通过npm安装第三方插件。

接下来,我们从一个最简单的,用来给输出的文件头部添加注释信息BannerPlugin的内置插件来实践插件的配置和运行。

修改webpack.config.js,添加 plugins配置项:

var Webpack = require("webpack");//必须引入
module:{
},
plugins: [
    new webpack.BannerPlugin("这里是打包文件头部注释!")//注意这是一个数组..
]

加载图片

现在去我们的项目目录中添加img文件夹,添加两张图片,一张大图jpg,一张小图png。

我们已经把webpack的内容了解了一部分了,那么在生产环境中,我不想每一次进行改变,都去命令行中运行我们的webpack的命令,我们应该怎么样实现改变后自动更新呢?
webpack 为我们提供了一个webpack --watch,他会启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
去运行这个命令试试吧!!

在我们改变代码之后,命令行中可以看到直接就自动编译了,但是显然不够智能,还需要我们手动去刷新浏览器,(其实用liveloadhack成自动刷新!)。

我反正不能忍,还要手动刷新浏览器。所以使用webpack-dev-server会是一个更好的办法!
它将在localhost:8080启动一个express静态资源web服务器,并且会以监听模式自动运行webpack,在浏览器打开http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个socket.io服务实时监听它们的变化并自动刷新页面。



后面的讲解大部分都是与vue联用,已经了解webpack大部分概念与操作,也明白了为什么vue-cli命令行
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值