記一次使用模塊化開發

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,這些東西並不能幫助到你們，由於比這好的網上比比皆是，權是本身給本身作的筆記，即便是哪天丟失了也還能在這裏找回來，讓本身有個沉澱。加油學習