webpack4入门到进阶
- 0
#讨论区
00条评论
实时对话
loading...
在查看众多开源项目后，发现大多数具有html的页面都使用webpack打包，而纯js或者工具包类的都使用rollupjs打包
安装webpack
yarn add webpack webpack-cli --dev
常见loader
配置文件
webpack.config.js
js
打包文件的起点入口
入口可分为多入口和单入口
js
用来指定打包后的文件名字和路径以及打包格式
loader就是翻译官，把文件翻译给webpack认识
增强webpack功能
主要思路
减少要处理的文件
缩小要查找的范围
附录
module.exports = {
//开发or生产
mode: '.....',
//定义入口
entry: '.....',
//输出配置
output: {},
//各种loader
module: {},
//如何生成 Source Map
devtool: '......',
//别名设置
resolve: {},
//插件（数组）
plugins: [],
//配置优化
optimization: {},
//排除打包时的依赖项
externals: {},
//开发服务器
devServer: {},
//代码切割
splitChunks: {},
//运行时的配置
runtimeChunk: {},
};
//单入口
module.exports = {
entry: `./index.js`,
}
//多入口
module.exports = {
entry: {
"index": `./index.js`,
},
}