介绍
webpack是一款模块加载器兼打包工具，它能把各种资源JS/CSS/图片等都作为模块来使用和处理。
webpack 是以 commonJS 的形式来书写脚本，对 AMD/CMD 的支持也很全面，方便其它模块也兼容使用
扩展性强，插件机制完善，能被模块化处理的资源多，例JS/CSS/IMG等
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
安装
webpack依赖于Node.js,所以安装webpack之前一定要先安装 Node.js
npm install webpack -g 全局安装webpack就可以在任何地方使用了
webpack -h 返回一些帮助的信息(说明已经安装成功)
使用
mkdir webpack-test
cd webpack-test/
npm init -y 生成 package.json
npm install webpack --save-dev 安装到当前项目开发依赖里面
用编辑器打开当前项目文件夹
新建一个 entry.js
代码：
document.getElementById('app').textContent = 'hello !';
新建一个初始化 html (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-test</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
然后在命令行执行：
webpack entry.js bundle.js // webpack 入口文件 生成新文件
目录下就生成了 bundle.js
用浏览器打开 index.html ，页面输出 hello ! 说明打包完成
和其它模块一起打包
当前目录下创建一个 name.js
用模块倒出的方式输出
module.exports = 'boloog';
修改 entry.js 引入name框架
var name = require('./name');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行：
webpack entry.js bundle.js
页面输出 hello - boloog 说明打包完成
安装loader (转换器)
当前 webpack 只能处理js文件，处理css文件需要安装 loader(css-loader style-loader)
npm install css-loader style-loader --save-dev 安装到当前项目到开发依赖
创建一个 style.css
body{
background-color: red;
color: #fff;
font-size: 30px;
}
修改 entry.js 引入css
var name = require('./name');
require('style-loader!css-loader!./style.css');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行：
webpack entry.js bundle.js
页面输出 hello - boloog 字体白色，背景红色，说明打包完成
webpack 配置文件实现命令打包
新建一个 webpack.config.js
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
相关配置可以参考 webpack配置
修改 entry.js 引入css去掉 loader名
var name = require('./name');
require('./style.css');
document.getElementById('app').textContent = 'hello - ' + name;
然后在命令行执行：
webpack
页面输出 hello - boloog 字体白色，背景红色，说明打包完成
调试代码 source-map 显示编辑之前的文件
然后在命令行执行：
webpack --devtool source-map
当前目录会生成一个 bundle.js.map
打开调试模式，重新刷新一下，Sources菜单生成 webpack:// 目录，此时可以看到代码编译之前的源码
bable babel-preset-es2015 处理 es2015 的js新写法
安装相关依赖
npm install babel-core babel-loader babel-preset-es2015 --save-dev
Babel的配置文件 目录下新建 .babelrc 配置文件，该文件用来设置转码规则和插件，基本格式如下。
{
"presets": ["es2015"]
}
修改 webpack.config.js 添加编译 es2015 的写法
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 排除 不编译当前目录下的js
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
修改 name.js 使用es6语法进行编写
let name = 'boloog'
export default name
修改 entry.js 使用es6语法进行编写
import name from './name'
import './style.css'
document.getElementById('app').textContent = 'hello - ' + name
然后在命令行执行：
webpack 打包完成
webpack-dev-server 模块热替换
它可以帮我们生成一个开发用的服务器，可以自动打包和只刷新有变化的地方（比如界面，样式等）
全局安装 npm install webpack-dev-server -g
安装到项目开发依赖里 npm install webpack-dev-server --save-dev
命令执行：
webpack-dev-server --inline --hot
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 54fb3429ee7a8cf1b9ff
...
提示打开 http://localhost:8080/
打开调试模式，重新刷新一下，Console 菜单下打印出 （表示热替换已启动）
[HMR] Waiting for update signal from WDS...
bundle.js:4398 [WDS] Hot Module Replacement enabled.
为了实现热替换，在 entry.js 创建一个输入框
let input = document.createElement('input')
document.getElementById('app').appendChild(input)
保存，当前页面上就出现了一个文本输入框，在文本框随意输入内容
再修改下 style.css的样式
body{
background-color: blue;
color: #fff;
font-size: 20px;
}
保存，此时页面样式变化了，文本框输入的内容还存在，说明模块热启动成功，如果手动刷新当前页面，文本框内容就没有了。
关掉正在执行的热替换命令
ctrl+c
源码
结语
好了，从现在开始你也可以用webpack编译js,css文件进行工作了，有什么不对的地方，欢迎指出，谢谢。
