记一次使用模块化开发

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,这些东西并不能帮助到大家，因为比这好的网上比比皆是，权是自己给自己做的笔记，即使是哪天丢失了也还能在这里找回来，让自己有个沉淀。加油学习

原文地址：https://www.cnblogs.com/lxmm/p/9893027.html