webpack 是一个模块打包工具，你可以使用 webpack 管理你的模块依赖，并编译输出模块们所需的静态文件。他可以很好地管理、打包 web 开发中所用的 HTML、JavaScript、CSS 以及各种静态文件(图片、字体等)，让开发过程更加高效。对于不同类型的资源，webpack 有对应的模块加载器。webpack 模块打包回分析模块间的依赖关系，最后生成优化且合并后的静态资源。
webpack的两大特色：
1、code splitting (自动完成)
2、loader 可以处理各种类型的静态资源，并且支持串联操作
webpack 是以 CommonJS 的形式来书写脚本的，但是对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。webpack 具有 requireJs 和 browserify 的功能，但仍有自己很多的新特性。对 CommonJS、AMD、ES6 的语法做了兼容，对 JavaScript、CSS、图片等资源都支持打包。webpack 有独立的配置文件 webpack.config.js
安装webpack
首先你的电脑里已经安装了npm
npm init -y //初始化
npm i webpack -D
// 或者
npm i webpack --save-dev
这里就按照好了webpack，下面来写第一个例子
其中index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
</head>
<body>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
app/index.js
import join from 'lodash/join'
function component () {
var element = document.createElement("div");
element.innerHTML = join(["hello", "webpack"], " ");
return element;
}
document.body.appendChild(component())
文件已经准备就绪，下面开始运行webpack
./node_modules/.bin/webpack ./app/index --output-filename dist/bundle.js
此处有一个坑，windows电脑正确写法应该是
.\node_modules\.bin\webpack .\app\index --output-filename dist\bundle.js
执行成功之后会生成 dist/bundle.js 这个文件目录，在浏览器里打开 index.html 文件，会发现输出 hello webpack，至此，一个简单的例子就完成了。
在 demo 下新建 webpacl 配置文件 webpack.config.js
module.exports = {
entry: {
bundle: './app/index.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist/'
}
}
然后执行下面的代码也可以正常输出
.\node_modules\.bin\webpack
修改 package.json 文件
执行下面的快捷键会有同样的效果
npm run build
如果需要打包多个文件，比如有index.js、index2.js，两种方法：
1、修改 webpack.config.js 文件
entry: {
bundle: ['./app/index.js', 'index2.js']
}
2、新建一个main.js 文件
import './index.js'
import './index2.js'
只需要打包这个main.js 这个文件就行
entry: {
bundle: './app/main.js'
}
打包图片资源
新建 index2.js 文件
import join from 'lodash/join'
function component () {
var element = document.createElement("div");
element.innerHTML = join(["hello", "Vue"], " ") + '<img src="' + require('./logo.png') + '">';
return element;
}
document.body.appendChild(component())
此处还需要下载两个 loader ： url-loader 和 file-loader
npm i -D url-loader file-loader
修改 webpack.config.js 文件
let webpack = require('webpack')
module.exports = {
entry: {
bundle: './app/main.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist/',
publicPath: 'dist/' // 资源访问路劲
},
module: {
rules: [
{
test: /\.(png|jpg)$/, //正则匹配文件后缀名
loader: 'url-loader',
options: {
limit: 100, // 最大文件，单位是 KB
name: 'img/[name].[hash:7].[ext]' //当文件大于100KB的时候，把文件放到img文件夹下，文件名是：原名字+随机输出的7位hash值+原扩展名；当文件小于100KB的时候，在生成的bundle.js文件里会发现图片是base64码
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin() // 对js 进行压缩
]
}
