项目01

1.webpack 打包所有的资源

webpack.common.js 配置

const path = require("path");
const webpack = require("webpack");
.....

const appConfig = {
    name: "app",
    entry: {
        //入口
    },
    context: path.resolve(__dirname, "src"),
    output: {
        //出口
    },
    resolve: {
        //模块解析
    },
    externals: {
        //不被打包 支持上下文
    },
    optimization: {
        //优化代码
    },
    runtimeChunk: {
        //提取重复文件
    },
    plugins: [
        //插件
    ],
    module: {
        //模块
    },          
    stats: "minimal"
}
//暴露模块
module.exports = appConfig;

webpack.config.js devServer

const path = require("path")
const fs = require("fs")
const merge = require("webpack-merge")
const commonConfig = require("./webpack.common")

module.exports = merge(commonConfig, {
  mode: "development",
  devServer: {
    https: {
      //dev-server 通过 HTTP 提供服务
    },
    proxy: {
      //代理跨域
    },
    watchOptions: {
      //与监视文件相关的控制选项
    }
  },
  devtool: "cheap-module-source-map"
})

webpack.prod.js 打包项目时的配置文件

webpack.dll.config 性能优化

gulp 自动化构建工具增强工作流程

gulpfile.js gulp 任务

var gulp=require('gulp');
const fs=require('fs');
const path=require('path');

gulp.task('movelib',function(){
  
});
function getOptions(){}
function moveFolder(override){}
function moveFile(source,target,override){}
function copyFile(source,target,override=false){}
function mkdir(dir){}

src文件

components 组件

config 配置

lib 库

resource 资源

view 视图

ejs 官网参考

<%= 输出数据到模板（输出是转义 HTML 标签）

扫描二维码关注公众号，回复： 8926729 查看本文章

<% ‘脚本’ 标签，用于流程控制，无输出。

%> 一般结束标签

 <title><%= htmlWebpackPlugin.options.title %></title>
 <% htmlWebpackPlugin.options.scripts.forEach(function(script){%>
            <script src="<%=script%>"></script>
  <% }) %>

ES6 --类 详情参考

class Components {
    constructor() {
        this.init()
    }

    init() {
        new OneMapGallery({
           
        })

        new PortalMapsGallery({
           
        })

        new FunctionGallery({
           
        })

        new OneMapGallery({
            
        })
    }
}

export default Components

登陆 class参考

import "./style.css"
import BaseApp from 'components/base/baseApp';
import axios from 'axios';
import 'bootstrap';
import ResourceGallery from './reource';
import Carousel from 'components/application-carousel/index';
// 跳转login组件
import * as login from 'components/login/login';

// 封装登陆验证
class App extends BaseApp {
    constructor() {
        super();
        this.bind();
        //获取登录信息
        document.getElementById('link-onemap').href = config.onemapPage;
        var geoCodingUrl = config.geocodingPage;
        if (login.check()) {
            geoCodingUrl = geoCodingUrl + '?token=' + login.token();
        } else {
            geoCodingUrl = config.loginPage;
        }
        document.getElementById('link-geocoding').href = geoCodingUrl;
        this.initTypicalApplication();
        this.initResourceCenter();
        this.initNews();
    }

    initResourceCenter() { new ResourceGallery(); }

    moveUpNewsList() { }

    initNews() {
        return axios.get(config.urls.news_mainpage).then((response) => {
            if (response.data.code === 200) {
            } else {
            }
        }).catch(function (error) {
        })
    }

    updateNews() { }

    initTypicalApplication() {
        axios.get(config.urls.application_getall, {
        }).then((result) => {
        });
        function bindControl(dataLength) { }
        function animate(target, direction, distance) { }
        return this;
    }
    
    bind() { }
}

new App();