zoukankan      html  css  js  c++  java
  • 模板为webpack的目录结构

    目录结构

                        |   -- build                            // 项目构建(webpack)相关代码
    		|   |-- build.js                     // 生产环境构建代码
    		|   |-- check-version.js             // 检查node、npm等版本
    		|   |-- dev-client.js                // 热重载相关
    		|   |-- dev-server.js                // 构建本地服务器
    		|   |-- utils.js                     // 构建工具相关
    		|   |-- webpack.base.conf.js         // webpack基础配置
    		|   |-- webpack.dev.conf.js          // webpack开发环境配置
    		|   |-- webpack.prod.conf.js         // webpack生产环境配置
    		|-- config                           // 项目开发环境配置
    		|   |-- dev.env.js                   // 开发环境变量
    		|   |-- index.js                     // 项目一些配置变量
    		|   |-- prod.env.js                  // 生产环境变量
    		|   |-- test.env.js                  // 测试环境变量
    		|-- src                              // 源码目录
    		|   |-- components                     // vue公共组件
    		|   |-- store                          // vuex的状态管理
    		|   |-- App.vue                        // 页面入口文件
    		|   |-- main.js                        // 程序入口文件,加载各种公共组件
    		|-- static                           // 静态文件,比如一些图片,json数据等
    		|   |-- data                           // 群聊分析得到的数据用于数据可视化
    		|-- .babelrc                         // ES6语法编译配置
    		|-- .editorconfig                    // 定义代码格式
    		|-- .gitignore                       // git上传需要忽略的文件格式
    		|-- README.md                        // 项目说明
    		|-- favicon.ico 
    		|-- index.html                       // 入口页面
    		|-- package.json                     // 项目基本信息
    

    dev-server.js

    //检查Node和npm版本
    require('./check-versions')()
    //获取config/index.js的默认配置
    var config = require('../config')
    //如果Node的环境无法判断当前是dev/product环境
    //使用config.dev.env.NODE_ENV 作为当前环境
    if (!process.env.NODE_ENV) {
      process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
    }
    //一个可以强制打开浏览器并跳转到指定URL的插件
    var opn = require('opn')
    //使用NodeJS自带的文件路径工具
    var path = require('path')
    //使用express
    var express = require('express')
    //使用webpack
    var webpack = require('webpack')
    //使用proxyTable
    var proxyMiddleware = require('http-proxy-middleware')
    //使用dev环境的webpack配置
    var webpackConfig = require('./webpack.dev.conf')
    
    // default port where dev server listens for incoming traffic
    // 如果没有指定运行端口,使用config.dev.port作为运行端口
    var port = process.env.PORT || config.dev.port
    // automatically open browser, if not set will be false
    var autoOpenBrowser = !!config.dev.autoOpenBrowser
    // Define HTTP proxies to your custom API backend
    // https://github.com/chimurai/http-proxy-middleware
    // 使用config.dev.proxyTable 的配置作为proxyTable的代理配置
    var proxyTable = config.dev.proxyTable
    //使用express启动一个服务
    var app = express()
    //启动webpack进行编译
    var compiler = webpack(webpackConfig)
    //启动webpack-hot-middleware也就是我们常说的Hot-reload
    var devMiddleware = require('webpack-dev-middleware')(compiler, {
      publicPath: webpackConfig.output.publicPath,
      quiet: true
    })
    
    var hotMiddleware = require('webpack-hot-middleware')(compiler, {
      log: () => {}
    })
    // force page reload when html-webpack-plugin template changes
    compiler.plugin('compilation', function (compilation) {
      compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
      })
    })
    
    // proxy api requests
    // 将proxyTable 中的请求配置挂在到启动的express服务上
    Object.keys(proxyTable).forEach(function (context) {
      var options = proxyTable[context]
      if (typeof options === 'string') {
        options = { target: options }
      }
      app.use(proxyMiddleware(options.filter || context, options))
    })
    
    // handle fallback for HTML5 history API
    // 使用connect-history-api-fallback匹配资源,如果不匹配就可以重定向到指定地址
    app.use(require('connect-history-api-fallback')())
    
    // serve webpack bundle output
    // 将暂存到内存中的webpack编译后的文件挂在express服务上
    app.use(devMiddleware)
    
    // enable hot-reload and state-preserving
    // compilation error display
    // 将Hot-reload挂在express服务上
    app.use(hotMiddleware)
    
    // serve pure static assets
    // 凭接static文件夹的静态资源路径
    var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
    app.use(staticPath, express.static('./static'))
    //为静态资源提供相应服务
    var uri = 'http://localhost:' + port
    
    var _resolve
    var readyPromise = new Promise(resolve => {
      _resolve = resolve
    })
    
    console.log('> Starting dev server...')
    devMiddleware.waitUntilValid(() => {
      console.log('> Listening at ' + uri + '
    ')
      // when env is testing, don't need open it
    //如果不是测试环境,自动打开浏览器并跳到我们的开发地址
      if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
        opn(uri)
      }
      _resolve()
    })
    
    var server = app.listen(port)
    
    module.exports = {
      ready: readyPromise,
      close: () => {
        server.close()
      }
    }
    

    webpack.base.confg.js webpack的基础配置文件

    module.export = {
        // 编译入口文件
        entry: {},
        // 编译输出路径
        output: {},
        // 一些解决方案配置
        resolve: {},
        resolveLoader: {},
        module: {
            // 各种不同类型文件加载器配置
            loaders: {
            ...
            ...
            // js文件用babel转码
            {
                test: /.js$/,
                loader: 'babel',
                include: projectRoot,
                // 哪些文件不需要转码
                exclude: /node_modules/
            },
            ...
            ...
            }
        },
        // vue文件一些相关配置
        vue: {}
    }
  • 相关阅读:
    Recommended Books for Algo Trading in 2020
    Market Making is simpler than you think!
    Top Crypto Market Makers of 2020
    Top Crypto Market Makers, Rated and Reviewed
    爬取伯乐在线文章(五)itemloader
    爬取伯乐在线文章(四)将爬取结果保存到MySQL
    爬取伯乐在线文章(三)爬取所有页面的文章
    爬取伯乐在线文章(二)通过xpath提取源文件中需要的内容
    爬取伯乐在线文章(一)
    爬虫去重策略
  • 原文地址:https://www.cnblogs.com/DCL1314/p/9480704.html
Copyright © 2011-2022 走看看