一、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动态路径配置的问题

【原创文章，转载请尊重原作者】