webpack -> vue Component 从入门到放弃（一）

时间 2019-12-04

标签 webpack vue component 入门放弃繁體版

原文原文链接

此篇文章仅仅是整理本身接触webpack的入门过程，可能有不少不正确的地方，但愿你们谅解，并指出错误帮助改进。html

对于webpack的介绍和前期对他的入门使用，我以为官方（中文网）已经介绍的很简单了，可是为了文章的可读性，仍是按照本身的方式从头至尾的码一遍。vue

What is webpack?node

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。(附上不明觉厉的解析图)webpack

First stepgit

先来安装个node.js(node官网下载)，打个预防针，我后面用npm(node包管理器)安装依赖包的时候，常常安装不成功，因为资源文件的不稳定，因此我建议装个淘宝镜像。github

$ npm install cnpm -g --registry=https://registry.npm.taobao.org
$ cnpm -v //安装后查看一下版本信息，以确认是否安装成功

安装成功后，以后安装依赖包均可以用 cnpm 代替 npm 执行，例如：web

$npm install

//等于

$ cnpm install

接下来全局安装 webpack，来练练手正则表达式

$ cnpm install webpack -g

此时 webpack 已经安装到了全局环境下，能够经过命令行webpack -h试试。npm

一般咱们会将 webpack 安装到项目的依赖中，这样就可使用项目本地版本的 webpack。项目目录中咱们要先生成package.json文件，json

# 确保已经进入项目目录

$ cnpm init

#固然也能够手动建立一个package.json，而后填入信息

{
"name": "webpack01",

"version": "1.0.0",

"description": "test webpack",

"main": "index.js",

"dependencies": {},

"devDependencies": {},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "BJ",

"license": "ISC"

}
# 安装 webpack 依赖

cnpm install webpack --save-dev

# 成功后package.json文件会发生点变化

"devDependencies": {

"webpack": "^2.2.1"

}

Second Step

咱们来建立几个文件，测试一下webpack的基础功能（此demo与官网贴出基本一致）

#index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="bundle.js"></script>
         //bundle.js 是webpack编译时生成的文件
    </body>
</html>

#entry.js
document.getElementById('app').innerHTML="it works";

能够开始用webpack打包了

$ webpack entry.js bundle.js

在浏览器中打开 index.html 就能够看到效果了。

咱们再加一个文件

#content.js
var p= document.createElement("p")
p.innerHTML="this another file";
document.body.appendChild(p);

#更改一下entry.js
document.getElementById('app').innerHTML="it works";
require("./content.js");

而后再次运行 webpack

$ webpack entry.js bundle.js

webpack 会再次显示日志

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

这篇文章所涉及到的demo文件目录：

bundle.js

content.js

entry.js

index.html

package.json

node-modules

是否是不过瘾，太简单了？！
接下里咱们加入webpack 的loader（很重要的一个东东）
先来看看 loader 的介绍：

Webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换。

Loader 能够理解为是模块和资源的转换器，它自己是一个函数，接受源文件做为参数，返回转换的结果。这样，咱们就能够经过 require 来加载任何类型的模块或文件，好比 CoffeeScript、 JSX、 LESS 或图片。

先来看看 loader 有哪些特性？

Loader 能够经过管道方式链式调用，每一个 loader 能够把资源转换成任意格式并传递给下一个 loader ，可是最后一个 loader 必须返回 JavaScript。
Loader 能够同步或异步执行。
Loader 运行在 node.js 环境中，因此能够作任何可能的事情。
Loader 能够接受参数，以此来传递配置项给 loader。
Loader 能够经过文件扩展名（或正则表达式）绑定给不一样类型的文件。
Loader 能够经过 npm 发布和安装。
除了经过 package.json 的 main 指定，一般的模块也能够导出一个 loader 来使用。
Loader 能够访问配置。
插件可让 loader 拥有更多特性。
Loader 能够分发出附加的任意文件。
Loader 自己也是运行在 node.js 环境中的 JavaScript 模块，它一般会返回一个函数。大多数状况下，咱们经过 npm 来管理 loader，可是你也能够在项目中本身写 loader 模块。

按照惯例，而非必须，loader 通常以 xxx-loader 的方式命名，xxx 表明了这个 loader 要作的转换功能，好比 json-loader。

在引用 loader 的时候可使用全名 json-loader，或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]
#Loader 能够在 require() 引用模块的时候添加，也能够在 webpack 全局配置中进行绑定，还能够经过命令行的方式使用。

看那么多，其实还不如来操做一下。。。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的~~~

webpack -> vue Component 从入门到放弃（四）
webpack -> vue Component 从入门到放弃（二）
webpack -> vue Component 从入门到放弃（三）
github源代码