摘要：本身也是运行在环境中的模块，它通常会返回一个函数。这个命名规则和搜索优先级顺序在的中定义。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的从入门到放弃四从入门到放弃二从入门到放弃三源代码
此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。
对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了，但是为了文章的可读性，还是按照自己的方式从头到尾的码一遍。
What is webpack?
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。(附上不明觉厉的解析图)
First step
先来安装个node.js(node官网下载)，打个预防针，我后面用npm(node包管理器)安装依赖包的时候，经常安装不成功，由于资源文件的不稳定，所以我建议装个淘宝镜像。
$ npm install cnpm -g --registry=https://registry.npm.taobao.org $ cnpm -v //安装后查看一下版本信息，以确认是否安装成功
安装成功后，之后安装依赖包都可以用 cnpm 代替 npm 执行，例如：
$npm install //等于 $ cnpm install
接下来全局安装 webpack，来练练手
$ cnpm install webpack -g
此时 webpack 已经安装到了全局环境下，可以通过命令行webpack -h试试。
通常我们会将 webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 webpack。项目目录中我们要先生成package.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
//bundle.js 是webpack编译时生成的文件
#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源代码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81743.html
摘要：说起，其实早在出现之前，网页就是在服务端渲染的。没有涉及流式渲染组件缓存对的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。选择的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。 作者：威威（沪江前端开发工程师）本文原创，转载请注明作者及出处。 背景 最近， 产品同学一如往常笑嘻嘻的递来需求文档， 纵使内心万般拒绝， 身体倒是很诚实...
摘要：从入门到放弃自动导入模块命名空间辅助函数什么是什么是状态管理，驱动应用的数据源，以声明方式将映射到视图，响应在上的用户输入导致的状态变化。最后重点来了外包在职萌新求内推位置广州 Vuex从入门到放弃（webpack自动导入模块 命名空间 辅助函数） 1.什么是vuex 1.1 什么是状态管理 state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actio...
摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...
摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...
摘要：主要作用目录结构本地调试代码部署热加载单元测试在如今前端技术飞速发展的时代，和作为前端框架已经呈现出了三国鼎立的局面。 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 在如今前端技术飞速发展的时代，angular.js、vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面。作为国人若你不知道 vue，小生表示可以理解，如果作为中国的前端猿不知道 vue，...
阅读 3166·2021-11-23 09:51
阅读 677·2021-10-14 09:43
阅读 3199·2021-09-06 15:00
阅读 2402·2019-08-30 15:54
阅读 2556·2019-08-30 13:58
阅读 1838·2019-08-29 13:18
阅读 1371·2019-08-27 10:58
阅读 505·2019-08-27 10:53
