webpack核心概念之entry用法
Entry用来指定打包入口
上方依赖图的入口是entry,对于非代码,字体依赖也会不断加入到依赖图中。所有的模块之间会存在一些依赖关系, 因此webpack里面会根据entry找到它的依赖,入口文件的依赖也可能依赖其他的一些文件,在这棵依赖树上,只要遇到依赖,webpack就会将其加入到依赖图中,最终遍历完后才会生成一些打包资源。
Entry的用法
单入口:entry是一个字符串
module.exports = {
entry:'./path/src/index.js'
}
复制代码
多入口: entry是一个对象
module.exports = {
entry:{
app:'./src/app.js',
myapp:'./src/myapp.js'
}
}
复制代码
核心概念之Output
Output用来告诉webpack如何将编译后的文件输出到磁盘
Output的用法:单入口配置
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
复制代码
Output的用法:多入口配置
module.exports = {
entry: {
app:'./src/app.js',
search:'./src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
}
}
复制代码
[name].js通过占位符确保文件名称的唯一 , 单个入口的文件名是可以写死的,像这种多个入口就需要通过占位符对他进行一个区分。
核心概念之Loaders
webpack原生只支持js和json两种文件类型,通过Loaders去支持其他如css类型并且把它们转化成有效的模块,并且可以添加到依赖图中。
loaders本身是一个函数,通过接收源代码然后经过loaders这个函数转换之后。会输出一个结果给下一步去使用。
常见的Loaders有哪些?
babel-loader
:转换ES6,ES&等JS新特性语法 css-loader
:支持.css文件的加载和解析。 less-loader
:将less文件转换成css
ts-loader
:将TS转换成JS
file-loader
:进行图片,字体等的打包
Loaders的用法
config.module
.rule('css')
.test(/\.css$/)
.use('css')
.loader('css-loader!')
module.export = config.toConfig();
复制代码
这里用到的是webpack-chain的配置方案,.test指定匹配规则,.use指定文件类型,.loader指定使用的loader名称。
核心概念之Plugins
Plugins通常是用于打包输出的js文件的优化,资源的管理,和环境变量的注入,作用于整个构建过程。
常见的Plugins有哪些?
module.exports = {
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
复制代码
使用时只需要把你定义好的插件,放入plugins数组里就可以了。
核心概念之Mode
Mode是用来指定当前的构建环境是:production,development还是none,默认情况下是production。
development
:设置process.env.Node_ENV的值为development。
production
: 设置process.env.Node_ENV的值为production。
none
:不开启任何优化选项。
写在最后
笔者最近在学webpack,想跟大家一起交流分享。webpack系列会持续更新,欢迎关注,如果可以的话那就再点个赞吧~xixi
作者:Key.L
链接:https://juejin.im/post/5e8870b9e51d4546ef3691f7
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com