标签：网上 情况 相对路径 加载 x-loader template 趋势 发展 module
GitHub项目地址：modules
使用模块化开发已成为当下一种趋势，之前没用过，近日得空对着某视频学习了下，主要运用webpack 当然原理不是很明白，之前看过文档，迷迷糊糊的。还是欠学习。现在勉强能用，随着前端的主流发展，node npm webpack vue react angular一个都不能少，无奈弱弱菜鸡的我现在也只是会vue的皮毛，那么就用皮毛来记录一下，了胜于无。
主体项目目录，通过webpack去做项目配置，原理就不是很明白啦，在写的过程中通过npm i 安装各种依赖包，然后node webpack整合在一起做输出，像上面的webpack.dev.config.js(开发环境) /webpack.prod.config.js(生产环境)做输出，定义好入口文件 出口文件 配置好规则（加载器 xxx-loader.个人理解）。然后就是要习惯import from ,export default/export xxx之类的，然后通过命令行运行编译输出。
const path = require("path");//node原生API
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
//入口
entry:{
//可以有多个入口，也可以有一个入口，如果一个就默认从这一个入口开始分析
‘main.js‘:‘./src/main.js‘ //我项目中的入口文件
},
//出口
output:{
path:path.resolve(‘./dist‘),//相对路径转绝对路径 node的API
filename:‘build.js‘//有单引号的是可以随意变换的，没有单引号是固定的
},
//声明模块,包含各个loader，加载器
module:{
loaders:[//webpack后面版本叫做rules
{test:/\.xxx$/,loader:‘xxx-loader‘}, //加载规则，会有多个加载器的情况
]
},
plugins:[
//插件的执行顺序与元素的索引有关
new HtmlWebpackPlugin({
template:"./src/index.html",//参照物
})
],
}
后面有时间再去看看webpack原理，那我的第一次涉猎模块化就介绍到这里啦，bytheway,这些东西并不能帮助到大家，因为比这好的网上比比皆是，权是自己给自己做的笔记，即使是哪天丢失了也还能在这里找回来，让自己有个沉淀。加油学习
标签：网上 情况 相对路径 加载 x-loader template 趋势 发展 module
原文地址：https://www.cnblogs.com/lxmm/p/9893027.html
