1. 指定配置文件执行打包
我们前面的使用只是使用的命令行操作,我们知道,使用webpack
命令的时候可以传递一些参数,但是如果参数很多的话,命令会编写的很长,而且每次都要写这么长,显得比较麻烦,因此我们比较推荐使用配置文件来配置webpack
打包时的一些参数。
这里我们说明一下,我们以后养成一个好习惯,就是将我们的源代码放到src
目录下,将打包生成的文件放到dist
目录下,比如我们的目录结构可以是这样的:
1.1 简单配置
在项目的根目录创建一个webpack.config.js
文件,在里面添加内容:
var path = require('path');
module.exports = {
// 打包起始的文件
entry: './src/js/1.js',
// 打包后的输出配置
output: {
// 打包后的保存文件目录,这里需要是个绝对路径(可手动指定),
path: path.resolve(__dirname, 'dist'),
// 打包输出后保存的文件名
filename: '1.b.js'
}
}
然后直接在命令行中使用命令:
npx webpack
# 或者(监听文件变化的话,如果修改配置文件内容后仍需要手动重新执行命令)
npx webpack --watch
其实使用配置文件,和我们之前的命令行打包是一样的,只是不用每次打包的时候都输很长的命令,因为都在配置文件中指定了。
1.2 多个打包入口,单个出口的配置
var path = require('path');
module.exports = {
// 打包起始的文件
entry: ['./src/js/1.js', './src/js/2.js'],
// 打包后的输出配置
output: {
// 打包后的保存文件目录,这里需要是个绝对路径(可手动指定),
path: path.resolve(__dirname, 'dist'),
// 打包输出后保存的文件名
filename: '1.b.js'
}
}
1.3 多个打包入口,多个出口的配置(带名字的)
var path = require('path');
module.exports = {
// 打包起始的文件
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
// 打包后的输出配置
output: {
// 打包后的保存文件目录,这里需要是个绝对路径(可手动指定),
path: path.resolve(__dirname, 'dist'),
// 可以使用占位符自动生成出口文件名,常用占位符有[name]、[id]、[hash]、[chunkhash]
filename: '[hash]-[name].b.js'
}
}
2. html-webpack-plugin
的使用
首先我们先了解一些什么是plugin
:plugin
翻译成中文就是插件的意思,webpack
提供了插件功能支持,可以方便的使用插件进行功能的扩展,webpack
的plugin
的配置很简单:plugins
配置项接收一个数组,数组里的每一项都是一个要使用的plugin
的实例,plugin
需要的参数通过构造函数传入。
2.1 安装插件
html-webpack-plugin
有一个基本功能是:根据模板文件生成对应的html代码,下面我们先安装一下它。
# 安装 html-webpack-plugin
npm install html-webpack-plugin --save-dev
2.2 单模板的基本使用:
var path = require('path');
// 引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 打包起始的文件
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
// 打包后的输出配置
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[hash]-[name].b.js',
// 可以设置上线后的地址(生成的html引用的是绝对路径)
publicPath:'http://www.baidu.com'
},
// 这里是配置插件的部分
plugins:[
// 使用插件
new HtmlWebpackPlugin({
// 指定生成html使用的模板
template:'./index.html'
})
]
};
使用上面的配置我们会发现:不仅我们的代码会自动打包,同时自动生成了html
代码,而且将打包生成的静态资源直接引用到html
结构中。不过,生成的js
和html
在同一个目录,我们实际中可能不是这样处理的,那么我们可以稍作修改:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//输出的打包文件可以加个目录
filename: 'js/[hash]-[name].b.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html'
})
]
};
当然了,上面的配置,打包后,我们发现生成的html文件始终叫index.html
,我们其实是可以修改的,只需要在使用插件的时候配置一下filename
项就行了。
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
//自动生成文件名
filename:'[hash].html',
//需要将脚本引入标签嵌入到何处。可以是:body|head|true|false等
inject: 'body'
})
]
在模板中使用插件变量(选看)
这个功能类似于模板引擎的自定义标记。我们可以在模板中使用特殊的标记来访问插件中设置的变量
比如我们的插件中是这样设置的:
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
filename:'[hash].html',
inject: 'body',
minify:{
//自动删除注释
removeComments:true
},
// 在这里自定义了变量
xxxx: 112233,
yyyy: 1+2
})
]
那么我们的html模板中可以这样使用它们:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--htmlWebpackPlugin注意大小写,它就叫这名字,和其它变量无关-->
<%= htmlWebpackPlugin.options.xxxx %>
<%= htmlWebpackPlugin.options.yyyy %>
<div class="xx"></div>
</body>
</html>
2.3 多模板使用
其实多模板的使用比较简单,只需要多次调用html-webpack-plugin
插件即可
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]-[name].b.js',
publicPath:'http://www.baidu.com'
},
plugins:[
new HtmlWebpackPlugin({
template:'./index1.html',
//自动生成名字
filename:'index.1.html'
}),
new HtmlWebpackPlugin({
template:'./index2.html',
//自动生成名字
filename:'index.2.html'
})
]
};
不过这种打包后,所有html文件引用的都是相同的编译后的js文件,这并不是我们想要的,我们有时候需要不同的页面引入不同的编译后的文件,比如上面的配置会生成index.1.html
和index.2.html
两个html,同时会打包生成两个js
文件,我想让index.1.html
引入page1
编译后的文件,index.2.html
引入page2
编译后的文件。怎么办呢?我们可以用该插件的chunks
配置项。
2.3.1 指定生成的html文件引入编译后的文件
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/1.js', './src/2.js'],
page2: './src/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//输出的打包文件可以加个目录
filename: 'js/[hash]-[name].b.js',
},
plugins:[
new HtmlWebpackPlugin({
template:'./1.html',
//自动生成名字
filename:'index.1.html',
chunks:['page1']
}),
new HtmlWebpackPlugin({
template:'./2.html',
//自动生成名字
filename:'index.2.html',
chunks:['page2']
})
]
};
chunks
配置项的值是个数组。除了该配置项之外,还有一个功能正好相反的配置项:excludeChunks
,表示排除引用哪些chunk。
关于该插件的使用,可以参考:
https://segmentfault.com/a/1190000007294861
https://segmentfault.com/a/1190000013883242
https://www.jianshu.com/p/08a60756ffda