一、webpack那點事-安裝、環境搭建


前言:

還記得兩年前剛來公司才幾個月,經理就安排我去做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動態路徑配置的問題


【原創文章,轉載請尊重原作者】


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM