您的位置：首页 > Web前端 > Webpack

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）

2016-11-29 11:14 1246 查看
转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/53390151
WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）
WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）http://blog.csdn.net/pcaxb/article/details/53390151详细介绍WebPack的安装-使用-Loader，WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）http://blog.csdn.net/pcaxb/article/details/53393997详细介绍配置-插件-环境-排错，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）http://blog.csdn.net/pcaxb/article/details/53466261详细介绍WebPack的配置和加载器，涉及到使用过程中的一些细节和技巧，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）http://blog.csdn.net/pcaxb/article/details/53515234详细介绍WebPack的插件、命令和package的配置， 涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。

Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在一个大规模的代码库中，维护各种模块资源的分割和存放，维护它们之间的依赖关系，并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。



以下是WebPack的几个特点以及与其他模块化工具的区别:

(1)代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

(2)Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

(3)智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

(4)插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

(5)快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。
1.安装
首先要安装Node.js， 安装Node.js主要是为了使用npm， Node.js自带了软件包管理器npm，Webpack需要Node.js v0.6以上支持，建议使用最新版Node.js。不了解Node.js的同学,可以参考我的另一篇博客：http://blog.csdn.net/pcaxb/article/details/52212367

使用npm安装全局的WebPack:

npm install webpack -g

说明:-g的意思是安装全局的WebPack,安装完成之后,可以用webpack -h验证是否安装成功。通常我们会将 Webpack安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

在项目中安装WebPack之前,要确保已经有package.json。不了解package.json的同学,可以参考我的另一篇博客http://blog.csdn.net/pcaxb/article/details/52212367

使用npm安装项目的WebPack:

npm install webpack --save-dev


说明:当你安装一个依赖模块时，正常情况下你得先安装他们，然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里。

-save和save-dev可以省掉你手动修改package.json文件的步骤。
-save 自动把模块和版本号添加到dependencies部分,-save-dve 自动把模块和版本号添加到devdependencies部分。

dependencies是正常运行该包时所需要的依赖项，而devdependencies则是开发的时候需要的依赖项，像一些进行单元测试之类的包。

如果你需要安装两种依赖:
npm install 或者 npm install packagename --dev
如果只安装dependencies:
npm install --production 或者npm install packagename
devDependencies只用于开发阶段完成集成测试等功能模块依赖，对于生产环境只需要使用npm install –production依赖必须的模块即可。

npm的package.json中文文档参考资料:点击打开链接

Webpack目前有两个主版本，一个是在master主干的稳定版，一个是在webpack-2分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。

查看WebPack版本信息:
npm info webpack
安装指定版本的WebPack:
npm install webpack@1.12.x --save-dev
一般使用WebPack都会使用WebPack的开发工具,不了解webpack-dev-server的同学,可以参考我的另一篇博客http://blog.csdn.net/pcaxb/article/details/52212367

安装WebPack的开发工具:
npm install webpack-dev-server --save-dev2.使用

按照如下目录创建项目结构并安装好WebPack



静态页面index.html,JS入口文件entry.js以及添加模块module.js中的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPack测试</title>
</head>
<body>

<script type="text/javascript" src="bundle.js"></script>

</body>
</html>


JS入口文件entry.js

document.write('WebPack测试<br/>');
document.write(require('./module.js')); // 添加模块
模块module.js
module.exports = 'WebPack测试module.js.';
然后编译 entry.js 并打包到 bundle.js：
webpack ./app/entry.js ./build/bundle.js
运行可以看到浏览器显示如下结果



修改package.json中的scripts到
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack ./app/entry.js ./build/bundle.js"
}
在命令中输入一下命令编译运行，可以达到和以上一样的结果

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

3.Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 
require
 来加载任何类型的模块或文件，比如CSS、 LESS 或图片。

Loader 可以同步或异步执行；Loader
运行在 node.js 环境中，所以可以做任何可能的事情；Loader 可以接受参数，以此来传递配置项给 loader；Loader
可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。

Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。Loader
可以通过 
npm
 发布和安装，除了通过 
package.json
 的 
main
 指定，通常的模块也可以导出一个
loader 来使用，Loader 可以访问配置，插件可以让
loader 拥有更多特性，Loader 可以分发出附加的任意文件。

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。按照惯例，而非必须，loader 一般以 
xxx-loader
 的方式命名，
xxx
 代表了这个loader 要做的转换功能，比如 
son-loader
。

Loader 可以在 
require()
 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。

以上目录中以及创建了style.css文件，首先将style.css文件看做是一个模块，然后用 
css-loader
 来读取它，再用 
style-loader
 把它插入到页面中。style.css的代码如下：
body{
background-color: yellowgreen;
}

修改 entry.js如下：

require("!style!css!./style.css");// 载入 style.css
document.write('WebPack测试<br/>');
document.write(require('./module.js')); // 添加模块
安装

npm install css-loader style-loader --save-dev
重新编译打包，刷新页面，就可以如下效果了



如果每次 
require
 CSS
文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

修改package.json中的scripts到

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack ./app/entry.js ./build/bundle.js",
"buildeasy": "webpack ./app/entry.js ./build/bundle.js --module-bind 'css=style!css'"
}
修改require("!style!css!./style.css")
 到 
require("./style.css")，然后执行命令重新编译打包，刷新页面，就可以看到和之前一样的效果了。
npm run buildeasy

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）介绍了WebPack的安装-使用-Loader，WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）将会介绍配置-插件-环境-排错。

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）

博客地址：http://blog.csdn.net/pcaxb/article/details/53390151

下载地址：http://download.csdn.net/detail/pcaxb/9696873

WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）

博客地址：http://blog.csdn.net/pcaxb/article/details/53393997

下载地址：http://download.csdn.net/detail/pcaxb/9697579

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）

博客地址：http://blog.csdn.net/pcaxb/article/details/53466261

下载地址：http://download.csdn.net/detail/pcaxb/9702314

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）

博客地址：http://blog.csdn.net/pcaxb/article/details/53515234

下载地址：http://download.csdn.net/detail/pcaxb/9705351
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  WebPack安装 WebPack使用 WebPack Loader WebPack配置 WebPack插件
相关文章推荐
新的分享
章节导航