webpack 是一個(gè)模塊打包工具尤溜，你可以使用 webpack 管理你的模塊依賴一死，并編譯輸出模塊們所需的靜態(tài)文件钞诡。他可以很好地管理周伦、打包 web 開發(fā)中所用的 HTML夕春、JavaScript、CSS 以及各種靜態(tài)文件(圖片专挪、字體等)及志，讓開發(fā)過程更加高效片排。對(duì)于不同類型的資源，webpack 有對(duì)應(yīng)的模塊加載器速侈。webpack 模塊打包回分析模塊間的依賴關(guān)系率寡，最后生成優(yōu)化且合并后的靜態(tài)資源。
webpack的兩大特色：
1倚搬、code splitting (自動(dòng)完成)
2冶共、loader 可以處理各種類型的靜態(tài)資源，并且支持串聯(lián)操作
webpack 是以 CommonJS 的形式來書寫腳本的每界，但是對(duì) AMD/CMD 的支持也很全面捅僵，方便舊項(xiàng)目進(jìn)行代碼遷移。webpack 具有 requireJs 和 browserify 的功能眨层，但仍有自己很多的新特性庙楚。對(duì) CommonJS、AMD趴樱、ES6 的語法做了兼容馒闷，對(duì) JavaScript、CSS叁征、圖片等資源都支持打包窜司。webpack 有獨(dú)立的配置文件 webpack.config.js
安裝webpack
首先你的電腦里已經(jīng)安裝了npm
npm init -y //初始化
npm i webpack -D
// 或者
npm i webpack --save-dev
這里就按照好了webpack，下面來寫第一個(gè)例子
其中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())
文件已經(jīng)準(zhǔn)備就緒航揉，下面開始運(yùn)行webpack
./node_modules/.bin/webpack ./app/index --output-filename dist/bundle.js
此處有一個(gè)坑塞祈，windows電腦正確寫法應(yīng)該是
.\node_modules\.bin\webpack .\app\index --output-filename dist\bundle.js
執(zhí)行成功之后會(huì)生成 dist/bundle.js 這個(gè)文件目錄，在瀏覽器里打開 index.html 文件帅涂，會(huì)發(fā)現(xiàn)輸出 hello webpack议薪，至此，一個(gè)簡(jiǎn)單的例子就完成了媳友。
在 demo 下新建 webpacl 配置文件 webpack.config.js
module.exports = {
entry: {
bundle: './app/index.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist/'
}
}
然后執(zhí)行下面的代碼也可以正常輸出
.\node_modules\.bin\webpack
修改 package.json 文件
執(zhí)行下面的快捷鍵會(huì)有同樣的效果
npm run build
如果需要打包多個(gè)文件斯议，比如有index.js、index2.js醇锚，兩種方法：
1哼御、修改 webpack.config.js 文件
entry: {
bundle: ['./app/index.js', 'index2.js']
}
2、新建一個(gè)main.js 文件
import './index.js'
import './index2.js'
只需要打包這個(gè)main.js 這個(gè)文件就行
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())
此處還需要下載兩個(gè) 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]' //當(dāng)文件大于100KB的時(shí)候恋昼，把文件放到img文件夾下，文件名是：原名字+隨機(jī)輸出的7位hash值+原擴(kuò)展名赶促；當(dāng)文件小于100KB的時(shí)候液肌，在生成的bundle.js文件里會(huì)發(fā)現(xiàn)圖片是base64碼
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin() // 對(duì)js 進(jìn)行壓縮
]
}
