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,這些東西並不能幫助到大家，因為比這好的網上比比皆是，權是自己給自己做的筆記，即使是哪天丟失了也還能在這裏找回來，讓自己有個沈澱。加油學習

記一次使用模塊化開發