大多数情况,我们使用webpack打包单页面应用,有的时候也会遇到多页面的项目
单入口配置
一般情况下的配置模板如下:
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}
entry
:配置入口文件的地址,可以是单一入口,也可以是多入口;output
:配置出口文件的地址,支持多出口配置;module
:配置模块,主要解析CSS和图片转换压缩等功能;plugins
:配置插件;devServer
:配置开发服务功能;
entry
我们的入口文件一般都是JS文件
entry: {
entry: './src/entery.js'
}
output
output
用来告诉webpack最后打包文件的地址和文件名称
output: {
//打包后的文件路径
path: path.resolve(__dirname, 'dist'),
//打包后的文件名称
filename: 'bundle.js'
}
当然还要引入path
模块,这个是nodejs自带的模块;在webpack.config.js
文件的头部引入;
const path = require('path');
打包HTML文件
需要使用html-webpack-plugin插件,它会将我们的html模板文件打包,自动生成一个引用了所有webpack打包的文件的新的html文件:
安装:
npm install html-webpack-plugin --save-dev
在配置文件的plugins
内加载
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
};
这将会产生一个包含以下内容的文件dist/index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
这样一个最基本的单页面的配置文件如下:
const path = require('path');
module.exports = {
//入口文件的配置项
entry: {
entry: './src/entry.js'
},
//出口文件的配置项
output: {
//输出的路径,用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: 'bundle.js'
},
//模块:例如解读CSS,图片如何转换,压缩
module: {},
//插件,用于生产模版和各项功能
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
//配置webpack开发服务功能
devServer: {}
}
多入口配置
多入口配置的时候只需要在entry中多增加一个入口文件
输出文件的时候将filename
的值修改为[name].js
,作用是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个出口文件
同时将定义多个HtmlWebpackPlugin插件,有几个页面就配置几项
module.exports = {
entry: {
client1: './src/client1/client1.js',
client2: './src/client2/client2.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'client1',
filename: 'client1.html',
template: 'src/client1/client1.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
title: 'client2',
filename: 'client2.html',
template: 'src/client2/client2.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
],
};