注意：
本文假设你有webpack2 的基础认识。
本文的目的是分离第三方代码和自身代码
项目结构如下所示：
61498117491_.pic.jpg
开始实战
创建一个目录<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'
})
]
}
说明
上述代码使用了多个入口。
webpack.optimize.CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。
HtmlWebpackPlugin该插件将所有生成的js文件自动引入index.html中。当文件名带有hash值时，这个插件尤其有用。
HtmlWebpackPlugin会根据模版生成一个新的html文件。
最后打包代码：
webpack --config webpack.config.js
71498118152_.pic_hd.jpg
在浏览器中打开dist文件夹下的index.html就能看到效果了。
