注意：
本文假設(shè)你有webpack2 的基礎(chǔ)認(rèn)識(shí)。
本文的目的是分離第三方代碼和自身代碼
項(xiàng)目結(jié)構(gòu)如下所示：
61498117491_.pic.jpg
開始實(shí)戰(zhàn)
創(chuàng)建一個(gè)目錄<code>webpack-demo2</code>,并安裝<code>wbepack</code>。
mkdir webpack-demo2 && cd webpack-demo2
npm init -y
npm install --save-dev webpack
安裝<code>jquery</code>
npm install jquery --save
安裝<code>html-webpack-plugin</code>
npm install html-webpack-plugin --save-dev
新建<code>index.html</code>文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
</body>
</html>
新建<code>index.js</code>文件
const $ = require('jquery');
$('body').html('hello world').css('color','red');
新建<code>webpack.config.js</code>文件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './index.js',
vendor: 'jquery'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack
.optimize
.CommonsChunkPlugin({
name: ['vendor']
}),
new HtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:'body'
})
]
}
說明
上述代碼使用了多個(gè)入口。
webpack.optimize.CommonsChunkPlugin 插件，是一個(gè)可選的用于建立一個(gè)獨(dú)立文件(又稱作 chunk)的功能，這個(gè)文件包括多個(gè)入口 chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時(shí)候加載一次，便存起來到緩存中供后續(xù)使用。
HtmlWebpackPlugin該插件將所有生成的js文件自動(dòng)引入index.html中。當(dāng)文件名帶有hash值時(shí)，這個(gè)插件尤其有用。
HtmlWebpackPlugin會(huì)根據(jù)模版生成一個(gè)新的html文件。
最后打包代碼：
webpack --config webpack.config.js
71498118152_.pic_hd.jpg
在瀏覽器中打開dist文件夾下的index.html就能看到效果了。
