module.exports = {
mode: '',
entry: '',
output: '',
plugins: [],
module: [],
resolve: '',
devServer: {}
}
1.entry
入口起点:用来指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的。
可以通过在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点)。默认为 ./src
一般单入口(单页应用)项目的entry是这个样子的
module.exports = {
mode: 'development',
entry: './src/index.js'
}
用来告诉webpack,从./src/index.js开始进行解析打包
而多入口(多页应用)项目的entry是这个样子的
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
home: './src/home.js'
}
}
这是用来告诉webpack需要2个独立分离的依赖文件进行起始打包工作
在多页应用中,(译注:每当页面跳转时)服务器将为你获取一个新的HTML文档。页面重新加载新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事情:
使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建bundle。由于入口起点增多,多页应用能够复用入口起点之间的大量代码/模块,从而可以极大的从这些技术中受益
根据经验,每个HTML文档只使用一个入口起点
2.output
配置output选项可以控制webpack如何向硬盘写入编译文件。注意,即使可以存入多个入口起点,但只指定一个输出配置。
用法:
在webpack中配置output属性的最低要求是,将它的值设置为一个对象,包括filename(用于输出文件的文件名),path(目标输出目录path的绝对路径)
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__diename,'dist')
}
}
此配置将一个单独的index.js文件输出到了dist文件夹下,名为bundle.js
多入口起点如何打包?
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
home: './src/home.js',
},
output: {
filename: '[name].js',
path: path.resolve(__diename,'dist')
}
}
如果配置创建了多个单独的chunk,则应该使用占位符来确保每个文件具有唯一的名称。
扩展:还可以使用CDN和资源hash
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
home: './src/home.js',
},
output: {
filename: '[name].[hash].js',
publicPath:'http://www.baidu.com/'
path: path.resolve(__diename,'dist')
}
}
3.devServer
devServer的功能有很多,以下列举一些比较常用的:
deveServer: {
port: 3000,
open: true,
host: 'localhost',
hot: true,
https: true,
progress: true,
contentBase:'./build',
compress:true,
proxy: {
"/api": {
target: "http://localhost:3000",
pathRewrite: {"/api" : ""}
}
}
}
port:指定要监听请求的端口号
open:是否要打开浏览器
host:使用一个指定的host,默认是localhost,如果希望服务器外部访问,指定为0.0.0.0
hot:启动热加载(需引入插件)
https:默认情况下dev-server通过http提供服务,也可以选择带有https的http/2服务
progress:打包进度条
contentBase:提供的静态资源目录
compress:一切服务都启用gzip压缩
proxy:
如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。
请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。
详细解读webpack配置之plugins、resolve、module
4.plugins(插件)
plugins选项用于以各种方式自定义webpack构建过程。webpack附带了各种内置插件,可以通过webpack.[plugin-name]访问这些插件, 这里 获取插件列表和对应文档。但请注意,这只是其中的一部分,社区中还有很多插件
//ex:
module.exports = {
plugins: [
new HtmlWebpackPlugin({})
]
}
5.resolve(解析)
这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看 模块解析 。
module.exports = {
resolve:{
modules:[path.resolve("node_modules"),path.resolve("dist")]
}
}
6.module(模块)
在webpack中任何一个东西都称为模块,js就不用说了。一个css文件,一张图片、一个less文件都是一个模块,都能用导入模块的语法(commonjs的require,ES6的import)导入进来。webpack自身只能读懂js类型的文件,其它的都不认识。但是webpack却能编译打包其它类型的文件,像ES6、JSX、less、typeScript等,甚至css、images也是Ok的,而想要编译打包这些文件就需要借助loader
loader就像是一个翻译员,浏览器不是不认识这些东西么?那好交给loader来办,它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块,而这些模块想要打包loader必不可少,所以它在webpack里显得异常重要。loader跟插件一样都是模块,想要用它需要先安装它,使用的时候把它放在module.rules参数里,rules翻译过来的意思就是规则,所以也可以认为loader就是一个用来处理不同文件的规则
module.exports = {
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
}