大多数情况下，我们使用webpack来打包单页面应用，有时也会遇到多页面项目
单条目配置
通用配置模板如下：
module.exports = {
entry: {},
output: {},
module: {},
plugins: [],
devServer: {}
}入口
我们的入口文件一般都是JS文件
entry： {
entry: './src/entery.js'
}输出
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 模板文件，并自动生成一个新的 html 文件，该文件引用了所有 webpack 打包的文件：
安装：
npm install html-webpack-plugin --save-dev在配置文件的插件中加载
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：
<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: {}
}
多入口配置
配置多个条目时webpack 入口，只需在条目中多添加一个条目文件即可
输出文件时，将filename的值修改为[name].js。 作用是根据入口文件的名称进行同名打包。 如果入口文件有多个，则可以打包多个导出文件。
同时会定义多个HtmlWebpackPlugin插件webpack 入口，如果有多个页面则配置多个项目
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
}
})
],
};参考
上一节我们提到了webpack配置文件webpack.config.js，它需要在我的项目根目录下自动创建。 建立之后，需要进行配置。 本节我们来看看如何配置webpack中的entry，即entry属性。
该条目可用于指定 webpack 构建我的项目的模块。 通过配置入口属性的值，可以指定一个或多个入口端点。 默认值为./src。
三种进入方式
Entry属性在webpack.config.js中配置，取值有3种模式，其中string和array用于配置单个entry。 对象用于配置多个条目。
单条目配置
如果要配置单个条目文件，可以为条目指定字符串或数组类型值，这样只会生成一个块。 当没有配置entry的文件对象名时，默认使用main。
例如，如果我们想向entry属性传递一个string类型的值，我们可以这样写：
entry:'./path/file.js'另外webpack的入口文件，如果传入一个链表类型的值，将会创建多个主条目，并且它们的依赖关系将被定向到一个chunk。 例如里面的代码表示当我们执行命令时，a.js和b.js会被合并并打包到bundle.js文件中：
entry:['./path/a.js','./path/b.js'],
例子：
我们可以通过一个具体的小计数器例子来看看入门的应用。 里面是我们需要的代码：
// a.js文件
function a(){
console.log("这是一个a.js文件");
}
// b.js文件
function b(){
console.log("这是一个b.js文件");
}然后配置 webpack.config.js 文件：
module.exports = {
entry:['./a.js','./b.js'], // 传入一个数组
output:{
path:__dirname,
filename:'./bundle.js'
}
}然后执行npmrunbuild命令可以看到a.js和b.js文件同时打包到了bundle.js文件中webpack的入口文件，如右图所示：
多入口配置
如果我们想为webpack配置多个entry，我们还可以为entry设置一个对象类型值。 句型如下：
entry: {[entryChunkName: string]: string|Array}对象语法可能更详细，但这是在应用程序中定义条目的最具可扩展性的方式。
简单理解可能就是在entry中设置通配符对：
entry: {
key1: value1,
key2: value2,
...
}这是最不完整的入门配置，其余模式只是简化的。 对象中的每一对属性代表一个条目文件，因此在配置多个页面时，可以应用这些模式的条目配置。
例子：
实现拆分应用和第三方库入口，webpack.config.js配置文件代码如下：
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};这意味着webpack将从app.js和vendors.js开始构建一个依赖图，但是这个依赖图是完全拆解的并且彼此独立。 这些方法在只有一个入口点的单页应用程序中更为常见。
【腾讯云】轻薄2核2G4M，首年65元
阿里云限时活动-ApsaraDB for RDSMySQL 1核2G配置1.88/月极速冲
