作者:fhkd
来源:SegmentFault 思否社区
webpack基础用法
核心概念之Entry
Entry用来指定webpack的打包入口。webpack是一个模块打包器,在webpack里面会把所有的资源(js、css、html、图片、字体)当成一个个模块,所有这些模块之前会存在依赖关系,因此webpack里面会从入口文件(entry指定)开始寻找依赖,依赖又存在其他依赖的文件,这样就形成一颗依赖图,对于非代码比如图片、字体依赖也会不断加入到依赖图里面。
Entry用法
单入口:entry是一个字符串(单页应用)
module.exports: {
entry: './path/to/to/entry/file.js'
}
多入口:entry是一个对象(多页应用)
module.exports={
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
核心概念之Output
Output用来告诉webpack如何将编译后的文件输出到磁盘,以及输出和的文件名称
output用法:多入口配置
不管是单入口还是多入口,output里面都是只有一个,那么output如何做到输出不同入口对应的打包文件,那就是使用占位符([name])确保文件名的唯一
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
核心概念之Loaders
webpack开箱即用只支持JS和JSON两种文件类型,通过Loaders去支持其他文件类型并且把他们转化成有效的模块,并且可以添加到依赖图中。
本身是一个函数,接受源文件作为参数,返回转换的结果。
常见的Loaders有哪些?
Loaders的用法
一个webpack配置里面会存在多个Loader,这些Loader需要存放在module的rules数组里面
const path = require('path')
module.exports = {
output: {},
module: {
rules: [
{test: /\.txt$/, use:'raw-loader'} // test指定匹配规则,use指定使用的loader名称
]
}
}
核心概念之Plugins
插件用于bundle文件的优化,资源管理和环境变量的注入,任何loaders不能做的事情都可以用plugins完成。
Plugins作用于整个构建过程。
常见的plugins有哪些?
文章评论