GitHub項目地址:modulesjavascript
使用模塊化開發已成爲當下一種趨勢,以前沒用過,近日得空對着某視頻學習了下,主要運用webpack 固然原理不是很明白,以前看過文檔,迷迷糊糊的。仍是欠學習。如今勉強能用,隨着前端的主流發展,node npm webpack vue react angular一個都不能少,無奈弱弱菜雞的我如今也只是會vue的皮毛,那麼就用皮毛來記錄一下,了勝於無。html
主體項目目錄,經過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,這些東西並不能幫助到你們,由於比這好的網上比比皆是,權是本身給本身作的筆記,即便是哪天丟失了也還能在這裏找回來,讓本身有個沉澱。加油學習vue