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 進行壓縮
]
}
