记一次使用模块化开发

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,这些东西并不能帮助到你们，由于比这好的网上比比皆是，权是本身给本身作的笔记，即便是哪天丢失了也还能在这里找回来，让本身有个沉淀。加油学习