webpack
webpack是模块加载器兼打包工具，它可以把各种资源，如js、less/sass、图片等做为模块来使用和处理。
webpack的官网是：http://webpack.github.io/
文档地址是： http://webpack.github.io/docs/
安装
-
常规是使用npm的形式来进行：
npm install webpack -g（全局安装） -
安装完成可以使用：
webpack -v（版本号）来校验是否安装成功 -
当然把依赖写入pagckage.json更贴合使用：
npm init（创建pageage.json）npm install 模块名 -g（全局安装）npm install 模块名 -save（产品模式用，添加到了package.json中的dependencies下）npm install 模块名 -save-dev（开发模式用，添加到了package.json中的devDependencies下）安装成功后，当前目录下会出现一个node_modules的文件夹。
npm update 模块名（更新模块）npm uninstall 模块名（卸载模块）
配置
配置的话每个项目里有一个webpack.config.js，它是一个配置项，就是告诉webpack它需要做什么。
此次配置包括如下：
webpack.config.js //基础配置
webpack-dev-server //自动刷新页面
html-webpack-plugin //自动生成页面
webpack打包DEMO
这里已裸奔的webpack为例，暂不使用vue-cli搭建出的。
按照上面步骤，全局安装webpack后创建一个demo的文件夹，文件夹里创建一个html（可以是文件夹，主要放准备给浏览器读取的数据，比如index.html）、一个文件夹（主要是存放原始数据和将要写的JavaScript模块）命名随意，这里以vue的index.html和app文件夹为例。
在app文件夹中建立两个js 起名随意，这里以app.js和index.js为例。
app.js（用来返回包含问候信息的html元素的函数）
module.exports = function() {
var hello = document.createElement('div');
hello.textContent = "Hello Everybody!";
return hello;
};
index.js（用来把app.js返回的信息插入页面）
var hello = require('./app.js');
document.getElementById('test').appendChild(hello());
index.html（加载打包后的js文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<div id="test"></div>
</body>
<!-- webpack一会打包完成的js -->
<script src="build/build.js"></script>
</html>
执行：webpack app/index.js build/build.js
2.webpack的配置
项目下建立一个webpack.config.js文件。
官方标配示例如下：
module.exports = {
dvtool: //配置生成Source Maps，选择合适的选项
plugins: //插件项
entry: //页面入口文件配置
output: //入口文件输出配置
path: //定义输出文件路径
filename: //指定打包文件名称
module: //加载器配置,对模块的处理逻辑
loaders: //定义了一些列的加载器
test: //正则，匹配到文件的后缀名
loader/loaders: //处理匹配到的文件
include: //包含的文件夹
exclude: //排除的文件夹
resolve: //其它解决方案的配置
extensions: //自动补全识别后缀
}
plugins
内置插件：通过在webpack配置中使用插件属性来将插件包含进你的项目中。
//webpack 应该在node_modules文件夹
//webpack-load-pluginds 调用后不需要require(plugins),在需要别的插件的时候webpack内部自动require();
var webpack = require("webpack");
//安装webpack-load-plugins后，下面就不用再require()插件了。
module.exports = {
plugins: [
//内置插件，内建plugins不需要require
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])], ["normal", "loader"])
]
}
其他插件：可以通过npm进行安装已经发布的插件。如果没有发布的也可以通过其他方式安装。
npm install component-webpack-plugin
使用方法如下：
//别人家的插件，你得需要require();
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
plugins: [
new ComponentPlugin();
]
}
如果是npm来安装第三方插件，建议使用webpack-load-plugins
npm install --save-dev webpack-load-plugins
使用时候在package.json文件里添加依赖：
{
"devDependencies": {
"clean-webpack-plugin": "*",
"html-webpack-plugin": "*"
}
}
在webpack.config.js文件中写入：
var webpack = require('webpack');
var webpackLoadPlugins = require('webpack-load-plugins');
var plugins = webpackLoadPlugins();
或者简写为：
var plugins = require('webpack-load-plugins')();
更详细的内容可参考npm关于插件的说明：https://www.npmjs.com/package/webpack-load-plugins
更多文章请移步 http://www.yuki.kim
网友评论