前言:
還記得兩年前剛來公司才幾個月,經理就安排我去做JS地圖相關的維護和開發工作,然后就跟着一個公司老鳥(沒倆月他離職了)熟悉地圖相關的功能。
本人嘛,那會前端JS實際開發經驗也才幾個月,然后當我看見公司地圖的上萬行源代碼,可想而知,直接懵逼。但是沒辦法呀,只能堅持去慢慢看,來來回回的找引用關系,熟悉每個模塊方法實現的功能,於是乎,從那之后,我感覺什么一兩千行代碼都是 so easy。
言歸正傳,正是在於這種情況下,在業務復雜的時候,相對應的代碼量會很多,上萬行的代碼也不再是夢,但是這種情況下,在后期維護的過程中,是很不方便的,因此在最近嘗試新版本的開發,采用webpack進行打包發布
webpack介紹:在開發過程中,我們可以利用模塊化開發(CMD模式),將一個大型的功能按不同的小功能,拆分成不同的模塊(文件),這樣在以后的維護中,我們可以針對不同的功能進行維護,不至於在一個上萬行的文件中,找來找去,而且當一個文件很大的時候,電腦不好的在查看,修改的時候會很卡,也不利於工作效率,因此產生了模塊化開發這個概念;而webpack正是將模塊化進行打包發布處理的一個工具
常見模塊化開發規范:CMD(seaJS) AMD(requireJS...)
一、webpack環境搭建1.webpack安裝
首先需要安裝nodeJS,先在nodeJS官網下載,進行NodeJS安裝
下載地址 https://nodejs.org/en/download/
下載完畢后,進行安裝,一切都以默認的選擇即可
2.npm安裝
安裝完畢后,打開cmd工具,輸入命令
npm install --save mocha
等待安裝完畢
3.webpack安裝
cmd工具中,輸入命令
npm install webpack -g
執行命令安裝webpack
到此webpack安裝完畢,可以使用
webpack -h
來查看版本號
到此,webpack安裝完成
二、webpack打包
1. 打開cmd工具,進入你的開發文件夾,其中此文件夾必須包含webpack.config.js文件,config配置參考如下
var webpack = require("webpack") module.exports = { entry: { "mcDemoMain": "./mcDemoMain.js"//直接require進來的文件會直接打包到這個文件中,如require('./common/Enum'),延遲加載的文件則不會,如require("bundle?lazy&name=demo!./demo/demo1") }, output: { path: "../../dist/demo/1.0",//設置打包后的js的輸出位置 filename: "[name].js",//和入口文件的名字相同 chunkFilename: "[name].young.js",//值模塊里需要單獨打包的文件 require.ensure //path: path.join(__dirname, 'static/js/app/dist'), //設置打包后的js的輸出位置 //filename: "[name].[hash].js", //和入口文件的名字相同 publicPath: "[sDomain]static/dist/demo/1.0/" //瀏覽器會從這個目錄開始查找模塊 }, module: { loaders: [ //{ test: /\.css$/, loader: "style!css" }, //{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: 'es2015' } }, ] }, plugins: [ new webpack.BannerPlugin('文件頂部注釋說明'), // new webpack.IgnorePlugin(/\.\/AsnyModuleA.js$/),//排除不想打包進去的插件 //new webpack.ProvidePlugin({ //這是把jquery掛到全局上,不用每個模塊都去require // "AsnyModuleA": '../../../dist/demo/AsnyModuleA.js', //}), //new webpack.optimize.CommonsChunkPlugin('common.js') //有多個入口文件的話提取公共部分,利用瀏覽器緩存 然后 commonsPlugin 可以用於分析模塊的共用代碼, 單獨打一個包出來: ] , resolve: { //modulesDirectories: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',//["C:\Users\Administrator\AppData\Roaming\npm\node_modules"], //root: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules', alias: { //jquery: path.join(__dirname, 'dev/jquery/jquery.js'), //AsnyModuleA: "../../../dist/demo/start/commom/AsnyModuleA.js", //在正常情況下我們以CommonJS風格引用avalon,以require('avalon') //'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由於oniui都以是../avalon來引用avalon的,需要在這里進行別名 } }, //externals: { // 'AsnyModuleA': 'AsnyModuleA' //} }
2.cmd進入開發目錄后,輸入
webpack
就可以進行打包了,如果顯示以下則表示成功
注明:
sDomain為動態URL路徑地址,下次更新sDomain動態路徑配置的問題
【原創文章,轉載請尊重原作者】